{"componentChunkName":"component---src-templates-post-js","path":"/blog/thinking-behind-tech","webpackCompilationHash":"0f979b9b09e9513b4912","result":{"data":{"site":{"siteMetadata":{"keywords":["blog","ubug","tech blog","技术博客","playground"]}},"mdx":{"fields":{"title":"🤔 技术背后隐含的思维方式","tips":[],"categories":["think"],"datetime":"2020-02-16 10:17:10","noFooter":false,"description":"很多技术的实现不是简单的解决某个场景，解决方案之后还有着不同的思考和思维方式，比如 Hooks、Flux、Fiber、TypeScript，这篇文章聊聊~~","plainTextDescription":"很多技术的实现不是简单的解决某个场景，解决方案之后还有着不同的思考和思维方式，比如 Hooks、Flux、Fiber、TypeScript，这篇文章聊聊\\~~\n","author":"Ubug","banner":null,"bannerCredit":null,"slug":"/blog/thinking-behind-tech","tags":["整理","思考","Typescript","ReactHooks","Fiber","Flux"]},"headings":[{"value":"1. Typescript 的思维方式","depth":2},{"value":"2. ReactHooks 的思维方式","depth":2},{"value":"3. Flux 的思维方式","depth":2},{"value":"4. React Fiber 的思维方式","depth":2}],"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n \"slug\": \"thinking-behind-tech\",\n \"title\": \"🤔 技术背后隐含的思维方式\",\n \"date\": \"2020-02-16 10:17:10\",\n \"author\": \"Ubug\",\n \"description\": \"很多技术的实现不是简单的解决某个场景，解决方案之后还有着不同的思考和思维方式，比如 Hooks、Flux、Fiber、TypeScript，这篇文章聊聊~~\",\n \"categories\": [\"think\"],\n \"tags\": [\"整理\", \"思考\", \"Typescript\", \"ReactHooks\", \"Fiber\", \"Flux\"]\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return mdx(\"div\", props);\n};\nconst layoutProps = {\n _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n let {\n components\n } = _ref,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"h2\", null, \"1. Typescript \\u7684\\u601D\\u7EF4\\u65B9\\u5F0F\"), mdx(\"p\", null, \"\\u771F\\u6B63\\u7684\\u9762\\u5411\\u63A5\\u53E3\\u7F16\\u7A0B\\uFF0C\\u66F4\\u81EA\\u7136\\u5B8C\\u5907\\u7684\\u6A21\\u5757\\u548C\\u903B\\u8F91\\u62BD\\u8C61\\uFF0C\\u8BA9\\u524D\\u7AEF\\u5F00\\u53D1\\u7684\\u601D\\u7EF4\\u65B9\\u5F0F\\u4ECE\\u600E\\u4E48\\u5B9E\\u73B0\\u7ED3\\u679C\\uFF0C\\u53D8\\u6210\\u4E86\\u66F4\\u9AD8\\u8D28\\u91CF\\u7684\\u9700\\u6C42\\u4EA4\\u4ED8\\uFF0C\\u53BB\\u601D\\u8003\\u63A5\\u53E3\\u7684\\u8F93\\u5165\\u8F93\\u51FA\\uFF0C\\u53BB\\u8BBE\\u8BA1\\u6A21\\u5757\\u548C\\u4EE3\\u7801\\uFF0C\\u66F4\\u4F55\\u51B5\\u4EC5\\u4EC5\\u662F\\u4EE3\\u7801\\u63D0\\u793A\\u548C\\u5BF9\\u63A5\\u8054\\u8C03\\u5C31\\u8DB3\\u591F\\u8BA9\\u4F60\\u723D\\u7FFB\\u5929\\u4E86\\u3002\"), mdx(\"p\", null, \"\\u4F20\\u7EDF\\u7684\\u524D\\u7AEF\\u5F00\\u53D1\\uFF0C\\u5F88\\u591A\\u6CA1\\u6709\\u4EAB\\u53D7\\u8FC7\\u9759\\u6001\\u7C7B\\u578B\\u8BED\\u8A00\\u5E26\\u6765\\u7684\\u64CD\\u4F5C\\u5DEE\\u5F02\\uFF0C\\u8C03\\u7528\\u65B9\\u6CD5\\u5B9E\\u73B0\\u529F\\u80FD\\u7684\\u903B\\u8F91\\u4E5F\\u5E76\\u6CA1\\u8BF4\\u591A\\u590D\\u6742\\uFF0C\\u6587\\u4EF6\\u7ED3\\u6784\\u7EC4\\u7EC7\\u7684\\u6A21\\u5757\\u5316\\u3001\\u7EC4\\u4EF6\\u5316\\u4E5F\\u80FD\\u6EE1\\u8DB3\\u9700\\u6C42\\u5B9E\\u73B0\\u9AD8\\u8D28\\u91CF\\u7684\\u4EE3\\u7801\\u3002\"), mdx(\"p\", null, \"\\u4F46\\u662F\\u590D\\u6742\\u6A21\\u5757\\u4E4B\\u95F4\\u7684\\u96C6\\u6210\\u4ECE\\u6765\\u4E0D\\u662F\\u90A3\\u4E48\\u987A\\u5229\\uFF0C\\u529F\\u80FD\\u7684\\u5347\\u7EA7\\u91CD\\u6784\\u3001\\u9879\\u76EE\\u7684\\u4EA4\\u63A5\\u4E00\\u76F4\\u662F\\u5F00\\u53D1\\u5F88\\u91CD\\u8981\\u7684\\u4E00\\u90E8\\u5206\\uFF0C\\u8FD9\\u5757\\u7ECF\\u5E38\\u4F1A\\u51FA\\u73B0\\u95EE\\u9898\\uFF0C\\u56E0\\u4E3A\\u5E76\\u4E0D\\u662F\\u6BCF\\u4E2A\\u4EBA\\u3001\\u6BCF\\u6B21\\u90FD\\u80FD\\u6E05\\u695A\\u7684\\u8BB0\\u4F4F\\u9879\\u76EE\\u7684\\u63A5\\u53E3\\u3001\\u53C2\\u6570\\u3001\\u7C7B\\u578B\\u7B49\\uFF0C\\u8FD9\\u5757\\u51FA\\u73B0\\u7684\\u9519\\u8BEF\\u5728\\u524D\\u7AEF\\u5360\\u4E86\\u5F88\\u5927\\u4E00\\u4E2A\\u6BD4\\u4F8B\\uFF0C\\u6240\\u4EE5\\u5F88\\u591A\\u7684\\u6D4B\\u8BD5\\u624D\\u80FD\\u8986\\u76D6\\u8FD9\\u5757\\u7684\\u8D28\\u91CF\\u4FDD\\u8BC1\\u3002\\u53EF\\u662F\\uFF0C\\u8FD9\\u5BF9\\u4E8E\\u9759\\u6001\\u8BED\\u8A00\\u5176\\u5B9E\\u5E76\\u4E0D\\u662F\\u95EE\\u9898\\u3002\"), mdx(\"p\", null, \"\\u4E4B\\u524D\\u7684\\u524D\\u7AEF\\u4EE3\\u7801\\u63D0\\u793A\\u4F9D\\u8D56\\u4E8E document \\u6CE8\\u91CA\\uFF0C\\u8FD9\\u5176\\u5B9E\\u5BF9\\u5F88\\u591A\\u4EBA\\u662F\\u4E00\\u79CD\\u8D1F\\u62C5\\uFF0C\\u5F88\\u591A\\u4EBA\\u53EA\\u4F7F\\u7528\\u5185\\u7F6E\\u7684\\u5B98\\u65B9\\u63D0\\u793A\\uFF0C\\u4E0D\\u80FD\\u4EAB\\u53D7\\u7C7B\\u578B\\u601D\\u7EF4\\u7684\\u597D\\u5904\\u3002TS \\u4F7F\\u7528\\u4E00\\u4E9B\\u6807\\u8BB0\\u548C\\u7C7B\\u578B\\u58F0\\u660E\\u80FD\\u591F\\u5F88\\u597D\\u7684\\u5B9E\\u73B0\\u5B8C\\u6574\\u7684\\u4EE3\\u7801\\u63D0\\u793A\\uFF0C\\u5E26\\u6709\\u4EE3\\u7801\\u63D0\\u793A\\u7684\\u7F16\\u7A0B\\u4F53\\u9A8C\\u80FD\\u8BA9\\u6548\\u7387\\u548C\\u8D28\\u91CF\\u66F4\\u597D\\uFF0C\\u81F3\\u5C11\\u4EE3\\u7801\\u8D28\\u91CF\\u91CC\\u9762\\u9759\\u6001\\u68C0\\u67E5\\u6CA1\\u6709\\u95EE\\u9898\\u4E86\\u3002\"), mdx(\"p\", null, \"\\u8FD9\\u90FD\\u662F Typescript \\u5E26\\u6765\\u7684\\u91CD\\u8981\\u7279\\u6027\\uFF0CTS \\u80FD\\u5E2E\\u6211\\u4EEC\\u68B3\\u7406\\u6E05\\u4E0D\\u540C\\u7684\\u63A5\\u53E3\\u3001\\u5929\\u751F\\u7684\\u8BA9\\u4F60\\u77E5\\u9053\\u8FD9\\u4E2A\\u63A5\\u53E3\\u5E94\\u8BE5\\u600E\\u4E48\\u6837\\u7684\\uFF0C\\u5728\\u8FD0\\u884C\\u65F6\\u624D\\u80FD\\u770B\\u5230\\u7684\\u95EE\\u9898\\u5728\\u5F00\\u53D1\\u7684\\u65F6\\u5019\\u5C31\\u5F88\\u660E\\u663E\\u7684\\u66B4\\u9732\\u4E86\\u3002\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u53E6\\u5916\\u4E5F\\u5199\\u4E86\\u4E00\\u7BC7\\u8BE6\\u7EC6\\u7684\\u6587\\u7AE0\\u8BF4 \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/blog/typescript\"\n }, \"\\uD83C\\uDFC3\\u200D\\u2642\\uFE0F TypeScript \\u4EE5\\u53CA\\u4E00\\u4E9B\\u7406\\u89E3\\u548C\\u6280\\u5DE7\"))), mdx(\"h2\", null, \"2. ReactHooks \\u7684\\u601D\\u7EF4\\u65B9\\u5F0F\"), mdx(\"p\", null, \"hooks \\u7684\\u601D\\u60F3\\u662F\\u5F00\\u53D1\\u8005\\u4E0D\\u518D\\u9700\\u8981\\u53BB\\u7406\\u6E05\\u6BCF\\u4E00\\u4E2A\\u751F\\u547D\\u5468\\u671F\\u51FD\\u6570\\u7684\\u89E6\\u53D1\\u65F6\\u673A\\uFF0C\\u4EE5\\u53CA\\u5728\\u91CC\\u9762\\u5904\\u7406\\u903B\\u8F91\\u4F1A\\u6709\\u54EA\\u4E9B\\u5F71\\u54CD\\u3002\\u800C\\u662F\\u66F4\\u5173\\u6CE8\\u53BB\\u601D\\u8003\\u54EA\\u4E9B\\u662F\\u72B6\\u6001\\uFF0C\\u54EA\\u4E9B\\u662F\\u526F\\u4F5C\\u7528\\uFF0C\\u54EA\\u4E9B\\u662F\\u9700\\u8981\\u7F13\\u5B58\\u7684\\u590D\\u6742\\u8BA1\\u7B97\\u548C\\u4E0D\\u5FC5\\u8981\\u7684\\u6E32\\u67D3\\u3002\"), mdx(\"p\", null, \"\\u76F8\\u6BD4 class \\u7684\\u751F\\u547D\\u5468\\u671F\\u7684\\u903B\\u8F91\\u7EC4\\u7EC7\\u5F62\\u5F0F\\uFF0C\\u4ECE\\u6574\\u4E2A\\u7EC4\\u4EF6\\u7684\\u6302\\u8F7D\\u5230\\u5378\\u8F7D\\u7684\\u4E8B\\u4EF6\\u9A71\\u52A8\\u3002hooks \\u4EE3\\u8868\\u7684\\u662F\\u4E00\\u4E2A\\u7EC4\\u4EF6\\u4E2D\\u72B6\\u6001\\u3001\\u884C\\u4E3A\\u548C\\u526F\\u4F5C\\u7528\\uFF0C\\u8FD9\\u4E5F\\u662F\\u4E3A\\u4EC0\\u4E48\\u6CA1\\u6709\\u7528 class \\u751F\\u547D\\u5468\\u671F\\u90A3\\u4E00\\u5957\\u73B0\\u6210\\u7684\\u903B\\u8F91\\u5B9E\\u73B0\\u7C7B\\u4F3C \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"onComponentMounted(callback)\"), \" \\u7684\\u63A5\\u53E3\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"const [state, setState] = useState(0)\\nuseEffect(()=>{\\n // \\u6267\\u884C\\u4E00\\u4E9B\\u526F\\u4F5C\\u7528\\u903B\\u8F91\\n return ()=>{\\n // \\u6E05\\u7406\\u526F\\u4F5C\\u7528\\u903B\\u8F91\\n }\\n})\\n\\n// ============ \\u8981\\u6BD4\\u4E0B\\u9762\\u4F18\\u96C5\\u7684\\u591A\\nconst states\\nonComponentDidMount((){\\n // \\u6267\\u884C\\u4E00\\u4E9B\\u526F\\u4F5C\\u7528\\u903B\\u8F91\\n})\\nonComponentDidUpdate((){\\n // \\u6267\\u884C\\u4E00\\u4E9B\\u526F\\u4F5C\\u7528\\u903B\\u8F91\\n // \\u66F4\\u65B0\\u72B6\\u6001\\n})\\nonComponentWillUnmount((){\\n // \\u6E05\\u7406\\u526F\\u4F5C\\u7528\\u903B\\u8F91\\n})\\n\")), mdx(\"p\", null, \"\\u6BD4\\u8F83\\u4E4B\\u540E\\u5C31\\u80FD\\u611F\\u89C9\\u5230\\u4E0D\\u540C\\u7684\\u4EE3\\u7801\\u7EC4\\u7EC7\\uFF0C\\u4EE3\\u8868\\u7740\\u4E0D\\u540C\\u7684\\u601D\\u7EF4\\u6A21\\u5F0F\\u3002\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u53E6\\u5916\\u4E5F\\u5199\\u4E86\\u4E00\\u7BC7\\u8BE6\\u7EC6\\u7684\\u6587\\u7AE0\\u8BF4 \", mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/blog/react-hooks-vs-class\"\n }, \"\\u2693 React Hooks \\u7406\\u89E3\"))), mdx(\"h2\", null, \"3. Flux \\u7684\\u601D\\u7EF4\\u65B9\\u5F0F\"), mdx(\"p\", null, \"\\u5728\\u786E\\u5B9E\\u5F88\\u590D\\u6742\\u7684\\u72B6\\u6001\\u7BA1\\u7406\\u4E2D\\uFF0C\\u5F3A\\u5236\\u6027\\u7684\\u96C6\\u4E2D\\u767B\\u8BB0\\u6BCF\\u4E00\\u6B21\\u4FEE\\u6539\\u548C\\u5206\\u53D1\\uFF0C\\u80FD\\u591F\\u5C06 \", mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\u6570\\u636E\\u72B6\\u6001\"), \" \\u3001\", mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\u6570\\u636E\\u72B6\\u6001\\u7684\\u4F7F\\u7528\"), \" \\u548C \", mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\u4FEE\\u6539\\u6570\\u636E\\u72B6\\u6001\\u7684\\u884C\\u4E3A\"), \" \\u5206\\u79BB\\uFF0C\\u5BF9\\u6574\\u4E2A\\u6846\\u67B6\\u7684\\u89E3\\u8026\\u662F\\u5F88\\u6709\\u6548\\u7684\\u3002\"), mdx(\"p\", null, mdx(\"img\", {\n parentName: \"p\",\n \"src\": \"../../novus/redux-architecture.png\",\n \"alt\": \"redux-architecture.png\"\n })), mdx(\"div\", {\n \"style\": {},\n \"'flex',\": \"\",\n \"justifycontent:\": \"\",\n \"'center'}}\": \"\"\n }, \"\\n \", mdx(\"figure\", {\n parentName: \"div\",\n \"className\": \"gatsby-resp-image-figure\"\n }, \"\\n \", mdx(\"img\", {\n parentName: \"figure\",\n \"src\": \"./novus/chart.svg\"\n }), \"\\n \", mdx(\"figcaption\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-figcaption\"\n }, \"novus \\u5355\\u5411\\u6570\\u636E\\u6D41\"), \"\\n \")), mdx(\"p\", null, \"flux \\u7684\\u6A21\\u5F0F\\u672C\\u8EAB\\u53EF\\u80FD\\u5728\\u5F88\\u591A\\u5730\\u65B9\\u90FD\\u6709\\u76F8\\u4F3C\\u7684\\u5B9E\\u73B0\\uFF0C\\u6BD4\\u5982\\u5E26\\u6709\\u6570\\u636E\\u64CD\\u4F5C\\u65B9\\u6CD5\\u7684\\u53D1\\u5E03\\u8BA2\\u9605\\u6A21\\u5F0F\\u3001\\u89C2\\u5BDF\\u8005\\u6A21\\u5F0F\\u90FD\\u53EF\\u4EE5\\u5B9E\\u73B0\\u8FD9\\u4E2A\\u80FD\\u529B\\uFF0C\\u8FD9\\u91CC\\u5F3A\\u8C03\\u7684\\u662F\\u6570\\u636E\\u89E3\\u8026\\u7684\\u601D\\u60F3\\u3002\"), mdx(\"p\", null, \"flux \\u5C06\\u4E00\\u4E2A\\u7EA6\\u5B9A\\u9650\\u5236\\u6B7B\\uFF0C\\u80FD\\u8FBE\\u5230\\u610F\\u60F3\\u4E0D\\u5230\\u7684\\u597D\\u5904\\uFF1A\", mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\u6570\\u636E\\u3001\\u4F7F\\u7528\\u6570\\u636E\\u3001\\u4FEE\\u6539\\u6570\\u636E\\u7684\\u903B\\u8F91\\u5206\\u79BB\"), \"\\u3002\\u5B9E\\u8DF5\\u8D77\\u6765\\u5C31\\u662F\\u89C6\\u56FE\\u5C42\\u4E0D\\u5141\\u8BB8\\u76F4\\u63A5\\u4FEE\\u6539\\u6570\\u636E\\uFF0C\\u53EA\\u80FD\\u8C03\\u7528 action \\u4FEE\\u6539\\u540E\\u518D\\u5206\\u53D1\\u7ED9\\u89C6\\u56FE\\u5C42\\u4F7F\\u7528\\u3002\\u8FD9\\u6837\\u4E00\\u4E2A\\u7EA6\\u5B9A\\u5C31\\u5B9E\\u73B0\\u4E86\\u5355\\u5411\\u6570\\u636E\\u6D41\\u7684\\u6982\\u5FF5\\uFF0C\\u6570\\u636E\\u4E0D\\u518D\\u662F\\u60F3\\u6539\\u5C31\\u6539\\uFF0C\\u53EA\\u80FD\\u901A\\u8FC7\\u7EDF\\u4E00\\u7EF4\\u62A4\\u7684\\u4FEE\\u6539\\u52A8\\u4F5C\\uFF0C\\u8FD9\\u6837\\u6570\\u636E\\u7684\\u53D8\\u52A8\\u5C31\\u53D8\\u5F97\\u53EF\\u4EE5\\u9884\\u6D4B\\u3002\"), mdx(\"p\", null, \"\\u5728\\u4E0D\\u5F15\\u5165\\u5355\\u72EC\\u6570\\u636E\\u5C42\\u7684\\u65F6\\u5019\\uFF0C\\u5F88\\u591A\\u7EC4\\u4EF6\\u4E4B\\u95F4\\u7684\\u6570\\u636E\\u901A\\u4FE1\\u90FD\\u662F\\u901A\\u8FC7 props \\u4E0B\\u53D1\\uFF0C\\u7136\\u540E\\u901A\\u8FC7 onCallback \\u6765\\u83B7\\u53D6\\u66F4\\u65B0\\u4E8B\\u4EF6\\uFF0C\\u751A\\u81F3\\u76F4\\u63A5\\u5728\\u5B50\\u7EC4\\u4EF6\\u4E2D\\u4FEE\\u6539 props \\u7684\\u5F15\\u7528\\u3002\\u8FD9\\u6837\\u7684\\u540E\\u679C\\u5C31\\u662F\\u6CA1\\u529E\\u6CD5\\u77E5\\u9053\\u4E00\\u4E2A\\u72B6\\u6001\\u7684\\u6539\\u53D8\\u662F\\u7531\\u8C01\\u5F15\\u8D77\\u7684\\uFF0C\\u94FE\\u8DEF\\u5F88\\u957F\\u4E0D\\u89C4\\u8303\\u5F88\\u96BE\\u53BB\\u8C03\\u8BD5\\u3002\"), mdx(\"p\", null, \"\\u800C\\u5F15\\u5165 flux \\u6982\\u5FF5\\u4E4B\\u540E\\u7684\\u7EA6\\u675F\\u5C31\\u662F\\uFF0C\\u6570\\u636E\\u8FD9\\u4E2A\\u4E1C\\u897F\\u4F60\\u4EEC\\u7236\\u5B50\\u7EC4\\u4EF6\\u901A\\u4FE1\\u53EF\\u4EE5\\uFF0C\\u4F46\\u662F\\u5168\\u5C40\\u7684\\u5E94\\u7528\\u72B6\\u6001 store \\u5FC5\\u987B\\u4EA4\\u7531\\u4E2D\\u5FC3\\u5316\\u7BA1\\u7406\\uFF0C\\u6BCF\\u6B21\\u4FEE\\u6539\\u90FD\\u9700\\u8981\\u901A\\u8FC7\\u6807\\u51C6\\u7684\\u4FEE\\u6539\\u51FD\\u6570 action \\u6765\\u6267\\u884C\\uFF0C\\u6700\\u540E\\u7684\\u7ED3\\u679C\\u66F4\\u65B0\\u9700\\u8981\\u901A\\u8FC7 reducer \\u540C\\u6B65\\u66F4\\u65B0\\u5230\\u6570\\u636E\\u4E2D\\u5FC3\\uFF0C\\u6BCF\\u4E2A\\u4F7F\\u7528\\u7684\\u754C\\u9762\\u7EC4\\u4EF6\\u4F1A\\u6536\\u5230\\u72B6\\u6001\\u66F4\\u65B0\\u3002\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/blog/novus\"\n }, \"\\uD83D\\uDCE6 \\u5B9E\\u73B0\\u4E00\\u4E2A\\u7B80\\u5355\\u6734\\u7D20\\u7684 react \\u6570\\u636E\\u7BA1\\u7406\\u5C42 NOVUS\"))), mdx(\"h2\", null, \"4. React Fiber \\u7684\\u601D\\u7EF4\\u65B9\\u5F0F\"), mdx(\"p\", null, \"\\u5728\\u524D\\u7AEF\\u5B9E\\u73B0\\u4EFB\\u52A1\\u7684\\u8C03\\u5EA6\\u548C\\u63A7\\u5236\\u6743\\u7684\\u8F6C\\u79FB\\uFF0C\\u907F\\u514D\\u8C03\\u7528\\u6808\\u963B\\u585E\\u7528\\u6237\\u54CD\\u5E94\\u3002\"), mdx(\"p\", null, \"React 16 \\u7248\\u672C\\u91C7\\u7528\\u65B0\\u7684 Fiber \\u67B6\\u6784\\uFF0CReact Fiber \\u662F\\u5BF9\\u6838\\u5FC3\\u7B97\\u6CD5\\u7684\\u4E00\\u6B21\\u91CD\\u65B0\\u5B9E\\u73B0\\u3002\\u4E4B\\u524D\\u7684\\u67B6\\u6784\\u662F\\u540C\\u6B65\\u6E32\\u67D3\\u7EC4\\u4EF6\\u6811\\u7684\\uFF0C\\u540C\\u6B65\\u7684\\u6982\\u5FF5\\u662F\\u4E00\\u65E6\\u8FDB\\u5165\\u8C03\\u7528\\u6808\\u5F00\\u59CB\\u5C31\\u8981\\u6267\\u884C\\u5B8C\\u6BD5\\uFF0C\\u4E00\\u65E6\\u7EC4\\u4EF6\\u6811\\u7684\\u6DF1\\u5EA6\\u5F88\\u6DF1 js \\u9700\\u8981\\u8BA1\\u7B97\\u7684\\u6E32\\u67D3\\u8D8A\\u591A\\uFF0C\\u5373\\u4F7F\\u6DFB\\u52A0 shouldComponenntUpdate \\u7B49\\u65B9\\u6CD5\\u6765\\u4F18\\u5316\\u8FD9\\u4E2A\\u95EE\\u9898\\uFF0C\\u4F46\\u662F\\u5FC5\\u8981\\u7684\\u66F4\\u65B0\\u4F9D\\u7136\\u6CA1\\u529E\\u6CD5\\u89E3\\u51B3\\uFF0C\\u6D4F\\u89C8\\u5668\\u7684\\u54CD\\u5E94\\u53EA\\u80FD\\u8981\\u4F9D\\u8D56\\u4E8E js \\u7684\\u539F\\u751F\\u6267\\u884C\\u5806\\u6808\\u4E86\\u3002\"), mdx(\"p\", null, \"JavaScript \\u539F\\u751F\\u7684\\u6267\\u884C\\u6A21\\u578B\\u662F\\u901A\\u8FC7Call stack\\uFF08\\u8C03\\u7528\\u6808\\uFF09\\u6765\\u7BA1\\u7406\\u51FD\\u6570\\u6267\\u884C\\u72B6\\u6001\\uFF0C\\u7531\\u5F15\\u64CE\\u7BA1\\u7406\\uFF0C\\u67D0\\u4E00\\u4E2A\\u6267\\u884C\\u6808\\u4E00\\u65E6\\u5F00\\u59CB\\uFF0C\\u5C31\\u4F1A\\u4E00\\u76F4\\u6267\\u884C\\uFF0C\\u76F4\\u5230\\u8FD9\\u4E2A\\u6267\\u884C\\u6808\\u6E05\\u7A7A\\uFF0C\\u65E0\\u6CD5\\u6309\\u9700\\u4E2D\\u6B62\\u3002\\u5168\\u90E8\\u7684\\u6267\\u884C\\u6808\\u53EF\\u80FD\\u4F1A\\u6709\\u4E00\\u4E9B\\u4EFB\\u52A1\\u8C03\\u5EA6\\uFF0C\\u4F46\\u662F\\u5927\\u4F53\\u4E0A\\u5F88\\u5BB9\\u6613\\u51FA\\u73B0\\u6267\\u884C\\u6808\\u8017\\u65F6\\u5F88\\u957F\\u5BFC\\u81F4\\u754C\\u9762\\u65E0\\u54CD\\u5E94\\u95EE\\u9898\\u3002\"), mdx(\"p\", null, \"\\u800C\\u4E00\\u65E6\\u539F\\u751F\\u8C03\\u7528\\u6808\\u4E2D\\uFF0C\\u7EC4\\u4EF6\\u6E32\\u67D3\\u7684\\u8C03\\u7528\\u6808\\u6267\\u884C\\u8D85\\u8FC7 16.67ms\\uFF0C\\u4F9D\\u7136\\u6CA1\\u80FD\\u591F\\u5C06\\u54CD\\u5E94\\u7528\\u6237\\u64CD\\u4F5C(\\u6BD4\\u5982 onClick)\\u7684\\u4EFB\\u52A1\\u961F\\u5217\\u53D6\\u51FA\\u6765\\u6267\\u884C\\uFF0C\\u754C\\u9762\\u5C31\\u4F1A\\u51FA\\u73B0\\u4F4E\\u4E8E 60fps \\u7684\\u5361\\u987F\\u3002\"), mdx(\"div\", {\n \"style\": {},\n \"'flex',\": \"\",\n \"justifycontent:\": \"\",\n \"'center'}}\": \"\"\n }, \"\\n \", mdx(\"figure\", {\n parentName: \"div\",\n \"className\": \"gatsby-resp-image-figure\"\n }, \"\\n \", mdx(\"img\", {\n parentName: \"figure\",\n \"src\": \"/chart-75930d3e99cd1f8e1c535f9026ae4dd5.svg\"\n }), \"\\n \", mdx(\"figcaption\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-figcaption\"\n }, \"\\u6E32\\u67D3\\u7684\\u4E8B\\u4EF6\\u961F\\u5217\"), \"\\n \")), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u662F\\u539F\\u751F\\u4EFB\\u52A1\\u961F\\u5217\\u7684\\u673A\\u5236\\u51B3\\u5B9A\\u7684\\uFF0C\\u6D4F\\u89C8\\u5668\\u7684 Event Loop \\u6A21\\u578B\\u6CA1\\u529E\\u6CD5\\u533A\\u5206\\u54EA\\u4E2A\\u4EFB\\u52A1\\u624D\\u662F\\u7528\\u6237\\u9700\\u8981\\u7684\\uFF0C\\u6267\\u884C\\u6808\\u4E5F\\u6CA1\\u529E\\u6CD5\\u7EC8\\u7AEF\\u5207\\u6362\\u3002\"), mdx(\"p\", null, \"\\u6240\\u4EE5\\u8FD9\\u4E2A\\u4E8B\\u60C5\\u9700\\u8981\\u6846\\u67B6\\u672C\\u8EAB\\u6765\\u638C\\u63A7\\uFF0C\\u4E5F\\u5C31\\u662F\\u8BA9\\u6846\\u67B6\\u6765\\u8C03\\u5EA6\\u6E32\\u67D3\\uFF08\\u4E0E\\u6D4F\\u89C8\\u5668\\u6E32\\u67D3\\u4E0D\\u540C\\uFF0C\\u5F3A\\u8C03\\u7684\\u662F\\u7EC4\\u4EF6\\u7684 render\\uFF09\\u7684\\u90E8\\u5206\\uFF0C\\u6240\\u4EE5 Fiber \\u662F\\u7528\\u6765\\u63A7\\u5236\\u6BCF\\u4E2A\\u7EC4\\u4EF6\\u7684\\u6E32\\u67D3\\u65F6\\u673A\\u3002\"), mdx(\"p\", null, \"\\u5728\\u601D\\u7EF4\\u65B9\\u5F0F\\u4E0A\\u8FD9\\u662F\\u4E00\\u4E2A\\u66F4\\u7CBE\\u7EC6\\u5316\\u7684\\u6267\\u884C\\u65B9\\u5F0F\\uFF0C\\u8BA9\\u6BCF\\u4E00\\u5E27\\u7684\\u6E32\\u67D3\\u80FD\\u591F\\u53EF\\u63A7\\uFF0C\\u6BCF\\u6B21\\u6E32\\u67D3\\u5B8C\\u4E4B\\u540E\\u5224\\u65AD\\u8FD8\\u6709\\u6CA1\\u6709\\u5269\\u4F59\\u65F6\\u95F4\\uFF0C\\u6CA1\\u6709\\u4E86\\u7684\\u8BDD\\u5C31\\u628A\\u63A7\\u5236\\u6743\\u4EA4\\u7ED9\\u6D4F\\u89C8\\u5668\\u6765\\u6267\\u884C\\u7528\\u6237\\u64CD\\u4F5C\\u54CD\\u5E94\\uFF0C\\u5904\\u7406\\u5B8C\\u4E4B\\u540E\\u518D\\u7EE7\\u7EED\\u6E32\\u67D3\\uFF0C\\u5B9E\\u73B0\\u4E86\\u5206\\u7247\\u6E32\\u67D3\\u7684\\u903B\\u8F91\\uFF0C\\u6700\\u7EC8\\u5B9E\\u73B0\\u8FD9\\u79CD\\u5728\\u524D\\u7AEF\\u4E2D\\u63A5\\u7BA1\\u6574\\u4E2A\\u8C03\\u5EA6\\u7684\\u6548\\u679C\\uFF0Cbrilliant\\uFF01\\uFF01\\uFF01\"), mdx(\"p\", null, \"\\u53C2\\u8003:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://zhuanlan.zhihu.com/p/63346965\"\n }, \"TypeScript - \\u4E00\\u79CD\\u601D\\u7EF4\\u65B9\\u5F0F\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://zhuanlan.zhihu.com/p/73866928\"\n }, \"\\u65E0\\u610F\\u8BC6\\u8BBE\\u8BA1--\\u590D\\u76D8React Hook\\u7684\\u521B\\u9020\\u8FC7\\u7A0B\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://segmentfault.com/a/1190000020110045\"\n }, \"Fiber \\u8C03\\u5EA6\\u51FD\\u6570\\u7684\\u6267\\u884C\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://juejin.im/post/5d12c907f265da1b6d4033c5\"\n }, \"Deep In React \\u4E4B\\u6D45\\u8C08 React Fiber \\u67B6\\u6784\\uFF08\\u4E00\\uFF09\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/rowone/blog/issues/3\"\n }, \"\\u5173\\u4E8E\\u4EFB\\u52A1\\u548C\\u5FAE\\u4EFB\\u52A1\\u7684\\u5165\\u961F\\u4E0E\\u8C03\\u5EA6\"))));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"isCreatedByStatefulCreatePages":false,"id":"e64b5c46-84ab-5699-bc5b-d5460491e764","prev":{"fileAbsolutePath":"D:/ubug/storybook/content/blog/react-pratice-and-performance/react-pratice-and-performance.md","id":"beeddcae-7d80-5cbf-9952-0567f3ee19be","parent":{"name":"react-pratice-and-performance","sourceInstanceName":"blog"},"excerpt":"大部分的 React 开发是不需要考虑性能优化的，因为很多业务复杂度不需要这么苛刻的需求，常见的页面和交互都比较简单，展示型的组件除了长列表并没有太多性能问题。不过 React 这类框架生来就是能够搭建大型单页应用的，所以性能问题在这些应用级别的页面中还是很值得说道的。 好巧不巧，我在项目中就遇到了很多的性能问题， 🌋 WebIDE…","fields":{"title":"📊 React 实践技巧和性能优化","slug":"/blog/react-pratice-and-performance","description":"如今单单实现业务目标已经不够了，性能和体验是上层产品的基础，更加优质、体验更好的业务变得越来越重要。所以实现极致的性能、提升产品体验，是很值得追求的一件事情。","date":"2020-02-24","redirects":null,"datetime":"2020-02-24 20:24:36","categories":["code"],"series":null,"tags":["react","hooks","pratice","performance","技巧","最佳实践","性能优化","思考","功能"],"status":"online"},"frontmatter":{"published":null,"tags":["react","hooks","pratice","performance","技巧","最佳实践","性能优化","思考","功能"],"theme":null,"slug":"react-pratice-and-performance","date":"2020-02-24 20:24:36"},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n \"slug\": \"react-pratice-and-performance\",\n \"title\": \"📊 React 实践技巧和性能优化\",\n \"date\": \"2020-02-24 20:24:36\",\n \"author\": \"Ubug\",\n \"description\": \"如今单单实现业务目标已经不够了，性能和体验是上层产品的基础，更加优质、体验更好的业务变得越来越重要。所以实现极致的性能、提升产品体验，是很值得追求的一件事情。\",\n \"categories\": [\"code\"],\n \"tags\": [\"react\", \"hooks\", \"pratice\", \"performance\", \"技巧\", \"最佳实践\", \"性能优化\", \"思考\", \"功能\"]\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return mdx(\"div\", props);\n};\nconst layoutProps = {\n _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n let {\n components\n } = _ref,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"p\", null, \"\\u5927\\u90E8\\u5206\\u7684 React \\u5F00\\u53D1\\u662F\\u4E0D\\u9700\\u8981\\u8003\\u8651\\u6027\\u80FD\\u4F18\\u5316\\u7684\\uFF0C\\u56E0\\u4E3A\\u5F88\\u591A\\u4E1A\\u52A1\\u590D\\u6742\\u5EA6\\u4E0D\\u9700\\u8981\\u8FD9\\u4E48\\u82DB\\u523B\\u7684\\u9700\\u6C42\\uFF0C\\u5E38\\u89C1\\u7684\\u9875\\u9762\\u548C\\u4EA4\\u4E92\\u90FD\\u6BD4\\u8F83\\u7B80\\u5355\\uFF0C\\u5C55\\u793A\\u578B\\u7684\\u7EC4\\u4EF6\\u9664\\u4E86\\u957F\\u5217\\u8868\\u5E76\\u6CA1\\u6709\\u592A\\u591A\\u6027\\u80FD\\u95EE\\u9898\\u3002\\u4E0D\\u8FC7 React \\u8FD9\\u7C7B\\u6846\\u67B6\\u751F\\u6765\\u5C31\\u662F\\u80FD\\u591F\\u642D\\u5EFA\\u5927\\u578B\\u5355\\u9875\\u5E94\\u7528\\u7684\\uFF0C\\u6240\\u4EE5\\u6027\\u80FD\\u95EE\\u9898\\u5728\\u8FD9\\u4E9B\\u5E94\\u7528\\u7EA7\\u522B\\u7684\\u9875\\u9762\\u4E2D\\u8FD8\\u662F\\u5F88\\u503C\\u5F97\\u8BF4\\u9053\\u7684\\u3002\"), mdx(\"p\", null, \"\\u597D\\u5DE7\\u4E0D\\u5DE7\\uFF0C\\u6211\\u5728\\u9879\\u76EE\\u4E2D\\u5C31\\u9047\\u5230\\u4E86\\u5F88\\u591A\\u7684\\u6027\\u80FD\\u95EE\\u9898\\uFF0C\", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/blog/workpad-part-1\"\n }, \"\\uD83C\\uDF0B WebIDE \\u7684\\u5F00\\u53D1\\u8BB0\\u5F55\\u5176\\u4E00\\uFF08\\u524D\\u8A00\\u548C\\u6982\\u89C8\\uFF09\"), \" \\u4E1A\\u52A1\\u6A21\\u578B\\u5F88\\u590D\\u6742\\uFF0C\\u72B6\\u6001\\u7BA1\\u7406\\u5F88\\u590D\\u6742\\uFF0C\\u5F88\\u591A\\u7EC4\\u4EF6\\u66F4\\u65B0\\u9891\\u7E41\\uFF0C\\u5B9E\\u8DF5\\u4E86\\u5F88\\u591A\\u7684\\u6027\\u80FD\\u4F18\\u5316\\u7684\\u624B\\u6BB5\\uFF0C\\u8FD9\\u91CC\\u603B\\u7ED3\\u4E0B\\u3002\"), mdx(\"h2\", null, \"\\u4E00\\u3001\\u91CF\\u5316\\u6307\\u6807\"), mdx(\"p\", null, \"\\u201C\\u5361\\u987F\\u201D \\u662F\\u4E2A\\u5F88\\u4E3B\\u89C2\\u7684\\u611F\\u53D7\\uFF0C\\u6027\\u80FD\\u4F18\\u5316\\u4E4B\\u524D\\u9700\\u8981\\u5C06\\u8FD9\\u4E2A\\u4E8B\\u60C5\\u91CF\\u5316\\uFF0C\\u4E00\\u5B9A\\u7A0B\\u5EA6\\u53EF\\u4EE5\\u8BF4 \\u201C\\u5361\\u987F\\u201D = \\u201C\\u8D85\\u8FC7 16.67ms \\u4E0D\\u80FD\\u54CD\\u5E94\\u64CD\\u4F5C\\u6216\\u8005\\u6267\\u884C\\u6E32\\u67D3\\u201D\\uFF0C\\u6240\\u4EE5\\u6267\\u884C\\u4E00\\u4E2A\\u6E32\\u67D3\\u6216\\u8005\\u8BA1\\u7B97\\u7684\\u65F6\\u95F4\\u95F4\\u9694\\u53EF\\u4EE5\\u5224\\u65AD\\u754C\\u9762\\u5361\\u987F\\u3002\"), mdx(\"p\", null, \"\\u53E6\\u4E00\\u65B9\\u9762\\u6027\\u80FD\\u4F18\\u5316\\u4E0D\\u4EC5\\u4EC5\\u8BF4\\u4F18\\u5316\\u5230\\u4E0D\\u5361\\u987F\\uFF0C\\u53EF\\u80FD\\u5BF9\\u4E8E\\u5F88\\u591A\\u4E0D\\u5FC5\\u8981\\u7684\\u6E32\\u67D3\\u548C\\u8BA1\\u7B97\\u4E5F\\u662F\\u9700\\u6C42\\u7684\\u4E00\\u90E8\\u5206\\uFF0C\\u8FD8\\u6709\\u4EA4\\u4E92\\u548C\\u89C6\\u89C9\\u65B9\\u9762\\u7684\\u4F18\\u5316\\uFF0C\\u6BD4\\u5982\\u9996\\u5C4F\\u65F6\\u95F4(First Contentful Paint)\\u3001\\u4E3B\\u8981\\u5185\\u5BB9\\u65F6\\u95F4(First Meaningful Paint)\\u3001\\u53EF\\u54CD\\u5E94\\u65F6\\u95F4(Time To Interactive)\\u3001\\u7528\\u6237\\u54CD\\u5E94\\u548C\\u7EC4\\u4EF6\\u6E32\\u67D3\\u7684\\u534F\\u8C03\\u3001\\u72B6\\u6001\\u6D3E\\u53D1\\u548C\\u8BA2\\u9605\\u673A\\u5236\\u7B49\\u7B49\\uFF0C\\u4F18\\u5316\\u4E86\\u4E4B\\u540E\\u80FD\\u6709\\u66F4\\u6D41\\u7545\\u7684\\u4F53\\u9A8C\\uFF0C\\u8FD9\\u5C31\\u662F\\u66F4\\u9AD8\\u8D28\\u91CF\\u7684\\u8981\\u6C42\\u3002\"), mdx(\"h2\", null, \"\\u4E8C\\u3001\\u5DE5\\u5177\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, \"Chrome Dev Tools / Performance / Lighthouse \\uFF0C\\u548C\\u4F20\\u7EDF\\u7684\\u65B9\\u5F0F\\u4E00\\u6837\\uFF0C\\u800C\\u4E14\\u4E5F\\u80FD\\u627E\\u51FA\\u5927\\u90E8\\u5206\\u7684\\u6027\\u80FD\\u74F6\\u9888\\uFF1B\"), mdx(\"p\", {\n parentName: \"li\"\n }, mdx(\"figure\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-figure\",\n \"style\": {}\n }, \"\\n \", mdx(\"span\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"651px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/593737bfbddffc68744ad62bd5bbe31e/cac84/performance.png\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"35.13513513513513%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAIAAACHqfpvAAAACXBIWXMAAAsSAAALEgHS3X78AAABY0lEQVQY03WOW0sCYRCG9y9GJJVZdpDE05YlEfQngoqoKPCikmyJPERdlK4uiZpmmrqeUpMUXc1y3W897Pe1ttlF0DDMO/PCMzPYR9FBk5qEy0C79TSpL/gMpQDeThm5lLFNL4PsWjW8FT3XP18YIlZ91o7nnXjDtcJ6TC2PCQP1VPB4IniiiBELOae65tI0vdoGqWXc2tqdukYusTlL8VqRJkbytjHOO9nzyXlqokONdygZ1u9yrwFz6HIxcCbzn8pphzJln0nblFVS1fTOv9/jffalkyHakX0+ss0/bvLRPRA7ANFdPn6EQQgRhAKI84w7bNEFzYqoVRUiphPO2cLNFBNYR7AHpRQ4odeCfbGySACiP4ClQAi9xQ7Tt6NMcqfk05UfVpmnDa5CiD4aHPhWJE2SIkzqxNtibZWDmas5tuJnC9RnnuxUwwJXH8LwF/sLS0uFHgC1pNBtD52fj/6DvwBwB17K1/fl3gAAAABJRU5ErkJggg==')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"Chrome Performance\",\n \"title\": \"Chrome Performance\",\n \"src\": \"/static/593737bfbddffc68744ad62bd5bbe31e/cac84/performance.png\",\n \"srcSet\": [\"/static/593737bfbddffc68744ad62bd5bbe31e/2c191/performance.png 259w\", \"/static/593737bfbddffc68744ad62bd5bbe31e/86b01/performance.png 518w\", \"/static/593737bfbddffc68744ad62bd5bbe31e/cac84/performance.png 651w\"],\n \"sizes\": \"(max-width: 651px) 100vw, 651px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \"), \"\\n \", mdx(\"figcaption\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-figcaption\"\n }, \"Chrome Performance\"), \"\\n \"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://reactjs.org/docs/profiler.html\"\n }, \"React Profiler\"), \" React \\u5185\\u7F6E\\u7684\\uFF0C\\u53EF\\u80FD\\u4E0D\\u662F\\u5F88\\u51C6\\u786E\\uFF0C\\u4F46\\u662F\\u91CD\\u70B9\\u5EA6\\u91CF\\u6E32\\u67D3\\u8FC7\\u7A0B\\u4E2D\\u7684\\u5F00\\u9500\\uFF1B\"), mdx(\"p\", {\n parentName: \"li\"\n }, mdx(\"figure\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-figure\",\n \"style\": {}\n }, \"\\n \", mdx(\"span\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"1012px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/9cce099ca58215148a348d8fc0fafcb8/16c97/profiler.png\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"47.87644787644788%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsSAAALEgHS3X78AAAB3klEQVQoz62QPW/TUBSGLeCvsfAX8AADC0gsjAxMReFDYWi6IAYnZGmn8hEaRJRWtIEmDnXsxElTApGJAo2/rx3bpb4+h2snLcyor/To+NrnPD42J757ca0ubt2QDyReliW+00k54BWlw7fEJl+tVfn6Tp1//6HKi+023+v1+K6isNplPTKbka+zelOSpKtcmqNhf2TPA/ylm+jP5xhFUUYYhkg8gp7voeVYaNomhpGHvk+QsHsuITgPAnb2MI2maVImPBx+7esmQdO0Y8u0qWMtsBn6TKemYVHtx5gOxyM6mU2pMxnTn+0mPZbaNDR0GlN6mgoNw2gy3RWutpkbiG/u49FejvZ3V0DdzYHayIO6/RC+fX4Ch58ewUh5CYE9hegkZtUCTVXAm04gdh1gLpoKXddtMeFlrvBWGNxef4oPtp4nwt46bkg13P/yCh+v3cK10l3c3C6gGxE8C00S/B3H52cAyISO44jZho3vo0F1dowN3UwmwQmErKc71WB15zV8HDTBIFa6BSTwNwvPec6ErUw493x1+TL2L9hD1kABKV18Cl0sldB0MOXf6yWnS+F+JvR8X8MLCCGkmwmLxeK9crm8WiqV8oxn/0GezRcEQbiTCZe5dAFwlUqF+wOZbVJUsAEppAAAAABJRU5ErkJggg==')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"React Profiler\",\n \"title\": \"React Profiler\",\n \"src\": \"/static/9cce099ca58215148a348d8fc0fafcb8/16c97/profiler.png\",\n \"srcSet\": [\"/static/9cce099ca58215148a348d8fc0fafcb8/2c191/profiler.png 259w\", \"/static/9cce099ca58215148a348d8fc0fafcb8/86b01/profiler.png 518w\", \"/static/9cce099ca58215148a348d8fc0fafcb8/16c97/profiler.png 1012w\"],\n \"sizes\": \"(max-width: 1012px) 100vw, 1012px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \"), \"\\n \", mdx(\"figcaption\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-figcaption\"\n }, \"React Profiler\"), \"\\n \")))), mdx(\"div\", {\n \"style\": {\n \"display\": \"flex\",\n \"justifyContent\": \"center\"\n }\n }, \"\\n \", mdx(\"figure\", {\n parentName: \"div\",\n \"className\": \"gatsby-resp-image-figure\"\n }, \"\\n \", mdx(\"img\", {\n parentName: \"figure\",\n \"src\": \"/profiler2-39ba82394205242af7c37ccb3a631f4d.gif\"\n }), \"\\n \", mdx(\"figcaption\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-figcaption\"\n }, \"React Profiler \\u4F7F\\u7528\"), \"\\n \")), mdx(\"ol\", {\n \"start\": 3\n }, mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://developer.mozilla.org/en-US/docs/Web/API/User_Timing_API\"\n }, \"User Timing\"), \" \\u4F7F\\u7528\\u8F83\\u9AD8\\u7CBE\\u5EA6\\u7684\\u63A5\\u53E3\\u624B\\u52A8\\u6D4B\\u91CF\\u4E00\\u4E9B\\u5F00\\u9500\\uFF0CReact \\u5185\\u90E8\\u4E5F\\u662F\\u4F7F\\u7528\\u4E86\\u8FD9\\u4E2A\\u63A5\\u53E3\\u53EF\\u4EE5\\u5728\\u6D4F\\u89C8\\u5668\\u7684 Performance \\u4E2D\\u805A\\u5408\\u7EC4\\u4EF6\\u7684\\u4FE1\\u606F\\uFF1B\"), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://github.com/puppeteer/puppeteer\"\n }, \"Puppeteer\"), \" \\u53EF\\u4EE5\\u5FFD\\u7565 UI \\u6E32\\u67D3\\uFF0C\\u624B\\u52A8\\u6D4B\\u91CF\\u4E00\\u4E9B\\u8BA1\\u7B97\\u7684\\u5F00\\u9500\\uFF1B\")), mdx(\"p\", null, \"\\u4EE5\\u4E0A\\u7684\\u5DE5\\u5177\\u80FD\\u591F\\u8C03\\u8BD5\\u5230\\u5E38\\u89C1\\u7684\\u65F6\\u95F4\\u82B1\\u9500\\uFF0C\\u80FD\\u591F\\u5E2E\\u52A9\\u627E\\u5230\\u90A3\\u4E9B\\u8017\\u65F6\\u7684\\u51FD\\u6570\\u6216\\u8005\\u7EC4\\u4EF6\\uFF0C\\u80FD\\u89E3\\u51B3\\u5927\\u90E8\\u5206\\u95EE\\u9898\\u3002\"), mdx(\"h2\", null, \"\\u4E09\\u3001\\u5361\\u987F\\u7684\\u8282\\u70B9\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, \"\\u6E32\\u67D3\"), mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u9996\\u5C4F\\u6E32\\u67D3\\u3002\\u4ECE\\u7528\\u6237\\u6253\\u5F00\\u9875\\u9762\\uFF0C\\u5230\\u9875\\u9762\\u5185\\u4E3B\\u8981\\u5185\\u5BB9\\u5C55\\u793A\\u51FA\\u6765\\u7684\\u65F6\\u95F4\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u54CD\\u5E94\\u6E32\\u67D3\\u3002\\u7528\\u6237\\u7684\\u64CD\\u4F5C\\u5728\\u754C\\u9762\\u4E0A\\u5C55\\u793A\\u7684\\u54CD\\u5E94\\uFF0C\\u5207\\u6362 tab \\u5C55\\u793A\\u65B0\\u7684\\u5185\\u5BB9\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, \"\\u7F51\\u7EDC\"), mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u7F51\\u7EDC\\u7684\\u901F\\u5EA6\\u4E5F\\u662F\\u975E\\u5E38\\u5F71\\u54CD\\u7528\\u6237\\u7684\\u8010\\u5FC3\\uFF0C\\u7528\\u6237\\u7684\\u5E73\\u5747\\u4E0A\\u7F51\\u901F\\u5EA6\\u5DF2\\u7ECF\\u5F88\\u5FEB\\u4E86\\uFF0C\\u5982\\u679C\\u4F60\\u7684\\u7F51\\u7AD9\\u52A0\\u8F7D\\u9875\\u9762\\u6216\\u8005\\u54CD\\u5E94\\u67E5\\u8BE2\\u7684\\u65F6\\u95F4\\u6709\\u70B9\\u957F\\uFF0C\\u7528\\u6237\\u53EF\\u80FD\\u5C31\\u4F1A\\u6000\\u7591\\u53EF\\u80FD\\u51FA\\u73B0\\u4E86\\u4EC0\\u4E48\\u95EE\\u9898\\u3002\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u540E\\u7AEF\\u4F20\\u7EDF\\u7684\\u505A\\u6CD5\\uFF1A\\u8D1F\\u8F7D\\u5747\\u8861\\u3001CDN\\u3001HTTP/2\\u3001\\u67E5\\u8BE2\\u7F13\\u5B58\\u3001\\u56FE\\u7247\\u538B\\u7F29\\u3001webp \\u7B49\\u624B\\u6BB5\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u524D\\u7AEF\\u80FD\\u505A\\u7684\\uFF1A\\u672C\\u5730\\u7F13\\u5B58\\u3001http \\u8BF7\\u6C42\\u7F13\\u5B58\\u3001localStorage \\u7F13\\u5B58\\u3001service worker\\u3001PWA\\u3001\\u9884\\u52A0\\u8F7D\\u6570\\u636E\\u7B49\\u53EF\\u4EE5\\u975E\\u5E38\\u6709\\u6548\\u7684\\u4F18\\u5316\\u7F51\\u7EDC\\u95EE\\u9898\\uFF08\\u8FD9\\u5757\\u4E5F\\u5F88\\u503C\\u5F97\\u6DF1\\u5165\\uFF09\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Preload\\u3001Prefetch\\u3001Preconnect \\u63D0\\u524D\\u8FDB\\u884C\\u9884\\u8FDE\\u63A5\\u4EE5\\u907F\\u514D DNS\\u3001TCP \\u4EE5\\u53CA TLS \\u5F80\\u8FD4\\u5EF6\\u8FDF\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u4F7F\\u7528\\u6E10\\u8FDB\\u5F0F\\u7684\\u56FE\\u7247\\u3001\\u4EE3\\u7801\\u62C6\\u5206\\u7B49\\u5206\\u9636\\u6BB5\\u52A0\\u8F7D\\u548C\\u5C55\\u793A\\u5185\\u5BB9\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"SSR \\u670D\\u52A1\\u7AEF\\u9884\\u6E32\\u67D3\"))), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, \"\\u8BA1\\u7B97\"), mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u524D\\u7AEF\\u7684\\u4E00\\u4E9B\\u64CD\\u4F5C\\u53EF\\u80FD\\u4F1A\\u5360\\u7528 JavaScript \\u7684\\u8BA1\\u7B97\\u8D44\\u6E90\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u6BD4\\u5982\\u5305\\u4F53\\u79EF\\u3001\\u52A8\\u753B\\u3001\\u9891\\u7E41\\u54CD\\u5E94 scroll \\u6216\\u8005 mousemove \\u4E8B\\u4EF6\\uFF0C\\u6216\\u8005\\u4E0D\\u5FC5\\u8981\\u7684\\u8BA1\\u7B97\")))), mdx(\"p\", null, \"\\u7C7B React \\u6846\\u67B6\\u76F8\\u6BD4\\u8F83\\u4F20\\u7EDF\\u7684\\u9875\\u9762\\u90FD\\u6BD4\\u8F83\\u5F31\\u4E00\\u4E9B\\uFF0C\\u56E0\\u4E3A\\u4E00\\u822C\\u4E0D\\u505A\\u4F18\\u5316\\uFF0C\\u9996\\u5C4F\\u6E32\\u67D3\\u80AF\\u5B9A\\u6BD4\\u9884\\u6E32\\u67D3\\u7684\\u6162\\u5F97\\u591A\\uFF0C\\u800C\\u4E14\\u5305\\u4F53\\u79EF\\u8F83\\u5927\\u5F71\\u54CD\\u7F51\\u7EDC\\u4F20\\u8F93\\uFF0C\\u6700\\u540E\\u6BCF\\u4E2A\\u7EC4\\u4EF6\\u90FD\\u8981\\u5148\\u8BA1\\u7B97\\u51FA\\u6765\\u624D\\u80FD\\u901A\\u8FC7 virtual dom \\u5230\\u771F\\u5B9E\\u754C\\u9762\\u4E0A\\u3002\"), mdx(\"p\", null, \"\\u6709\\u8FD9\\u4E9B\\u65B9\\u9762\\u7684\\u56E0\\u7D20\\uFF0C\\u4F46\\u662F\\u5177\\u4F53\\u5230\\u6BCF\\u4E00\\u4E2A\\u4F18\\u5316\\u70B9\\u90FD\\u6709\\u5F88\\u591A\\u7684\\u5B9E\\u8DF5\\uFF0C\\u4E00\\u822C\\u7684\\u9879\\u76EE\\u9009\\u62E9\\u6700\\u9002\\u5408\\u7684\\u5373\\u53EF\\uFF0C\\u8981\\u6C42\\u82DB\\u523B\\u7684\\u5728\\u8FD9\\u4E0A\\u9762\\u505A\\u5230\\u6781\\u81F4\\u4E5F\\u662F\\u5F88\\u4E0D\\u5BB9\\u6613\\u7684\\u3002\\u5E38\\u89C1\\u7684\\u4F18\\u5316\\u65B9\\u6CD5\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u51CF\\u5C11\\u4E0D\\u5FC5\\u8981\\u7684\\u8BA1\\u7B97\\u548C\\u6E32\\u67D3\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u964D\\u4F4E\\u72B6\\u6001\\u53D8\\u66F4\\u7684\\u5F71\\u54CD\\u8303\\u56F4\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u8C03\\u5EA6\\u8BA1\\u7B97\\u4EE5\\u907F\\u514D\\u540C\\u65F6\\u963B\\u585E\")), mdx(\"h2\", null, \"\\u56DB\\u3001\\u5E38\\u89C1\\u77E5\\u8BC6\"), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"\\u6211\\u8BA4\\u4E3A\\u6027\\u80FD\\u7684\\u6781\\u81F4\\u4F18\\u5316\\u66F4\\u5E94\\u8BE5\\u878D\\u5165\\u5728\\u4E00\\u822C\\u7F16\\u7801\\u8FC7\\u7A0B\\u4E2D\\uFF0C\\u800C\\u4E0D\\u662F\\u4E25\\u91CD\\u4F9D\\u8D56\\u4E8E\\u4E8B\\u540E\\u7684\\u5EA6\\u91CF\\u548C\\u4E13\\u9879\\u4F18\\u5316\\u3002\\u56E0\\u4E3A\\u5F88\\u591A\\u7684\\u4E0D\\u5FC5\\u8981\\u7684\\u8BA1\\u7B97\\uFF0C\\u662F\\u56E0\\u4E3A\\u6CA1\\u6709\\u7406\\u89E3\\u6574\\u4E2A\\u6846\\u67B6\\u7684\\u6D41\\u7A0B\\u548C\\u673A\\u5236\\uFF0C\\u53EF\\u80FD\\u4E1A\\u52A1\\u4F18\\u5148\\u7684\\u65F6\\u5019\\u5E76\\u4E0D\\u987E\\u7684\\u5F88\\u591A\\u6700\\u4F73\\u5B9E\\u8DF5\\u3002\")), mdx(\"p\", null, \"\\u6BD4\\u5982\\u6DFB\\u52A0\\u4E00\\u4E2A prop \\u53C2\\u6570\\u4F20\\u9012\\u4F60\\u7B2C\\u4E00\\u65F6\\u95F4\\u60F3\\u7684\\u662F\\u5B50\\u7EC4\\u4EF6\\u7528\\u5F97\\u5230\\uFF0C\\u800C\\u5F88\\u5C11\\u53BB\\u8003\\u8651\\u8FD9\\u4E2A\\u53C2\\u6570\\u5BF9\\u5B50\\u7EC4\\u4EF6\\u7684\\u91CD\\u590D\\u6E32\\u67D3\\u6709\\u591A\\u5927\\u5F71\\u54CD\\u3002\"), mdx(\"p\", null, \"\\u805A\\u7126\\u5230 React \\u8FD9\\u4E00\\u4E2A\\u6846\\u67B6\\u4E0A\\uFF0C\\u6709\\u5F88\\u591A\\u7684\\u601D\\u7EF4\\u5F62\\u5F0F\\u548C\\u4F20\\u7EDF\\u7684\\u7EC4\\u4EF6\\u5316\\u4E0D\\u540C\\uFF0C\\u8FD9\\u91CC\\u7740\\u91CD\\u8BF4\\u4E00\\u4E0B\\uFF1A\"), mdx(\"h3\", null, \"0. \\u4E25\\u683C\\u907F\\u514D\\u5927\\u7EC4\\u4EF6/\\u72B6\\u6001\\u591A\\u7684\\u7EC4\\u4EF6\"), mdx(\"p\", null, \"React \\u6216\\u8005\\u7C7B\\u4F3C\\u7684\\u8BA2\\u9605\\u66F4\\u65B0\\u673A\\u5236\\uFF0C\\u6700\\u5FCC\\u8BB3\\u7684\\u5C31\\u662F\\u5927\\u7C92\\u5EA6\\u7684\\u8BA2\\u9605\\u89E6\\u53D1\\uFF0C\\u800C React \\u54CD\\u5E94\\u5F0F\\u7684\\u6839\\u672C\\u4E5F\\u662F\\u4F9D\\u8D56\\u4E8E\\u6B64\\uFF0C\\u5927\\u7EC4\\u4EF6\\u6216\\u8005\\u72B6\\u6001\\u591A\\u7684\\u7EC4\\u4EF6\\u5C31\\u4F1A\\u5BFC\\u81F4\\u9891\\u7E41\\u72B6\\u6001\\u53D8\\u66F4\\u5BFC\\u81F4\\u7684\\u6E32\\u67D3\\u3002\"), mdx(\"p\", null, \"React \\u66F4\\u4F9D\\u8D56\\u4E8E state \\u7684\\u66F4\\u65B0\\uFF0C\\u6240\\u4EE5\\u9700\\u8981\\u5C06\\u9891\\u7E41\\u53D8\\u66F4\\u7684 state \\u8F6C\\u79FB\\u5230\\u5B50\\u7EC4\\u4EF6\\u6765\\u9694\\u79BB\\u53D8\\u66F4\\u3002\"), mdx(\"h3\", null, \"1. shouldComponentUpdate\"), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u662F\\u6700\\u57FA\\u7840\\u7684\\u91CD\\u590D\\u6E32\\u67D3\\u4F18\\u5316\\u903B\\u8F91\\uFF0C\\u544A\\u8BC9 React \\u54EA\\u4E9B\\u53D8\\u66F4\\u662F\\u4E0D\\u4F1A\\u5F71\\u54CD\\u7EC4\\u4EF6\\u7684\\u8868\\u73B0\\u7684\\uFF0C\\u4EE5\\u8DF3\\u8FC7\\u6E32\\u67D3\\u8FD0\\u7B97\\u7684\\u903B\\u8F91 UNSAFE_componentWillUpdate\\u3001render\\u3001componentDidUpdate \\u90FD\\u5C06\\u4E0D\\u4F1A\\u6267\\u884C\\u3002\"), mdx(\"p\", null, \"\\u4F7F\\u7528\\u4E0A\\u76F4\\u63A5\\u5728 shouldComponentUpdate \\u7684\\u751F\\u547D\\u5468\\u671F\\u4E2D\\u6BD4\\u5BF9 this.props \\u548C nextProps \\u4EE5\\u53CA this.state \\u548C nextState\\uFF0C\\u8FD4\\u56DE false \\u58F0\\u660E\\u672C\\u6B21\\u6E32\\u67D3\\u7684\\u903B\\u8F91\\u5230\\u6B64\\u4E0D\\u5FC5\\u5411\\u4E0B\\u8FDB\\u884C\\u4E86\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"shouldComponentUpdate(nextProps, nextStates) {\\n if (nextStates.count === this.state.count) return false;\\n if (nextStates.count2 !== this.state.count2) return false;\\n return true\\n}\\n\")), mdx(PerForDemo0, {\n mdxType: \"PerForDemo0\"\n }), mdx(\"p\", null, \"\\u5F00\\u53D1\\u7684\\u65F6\\u5019\\u5982\\u679C\\u4F20\\u9012\\u7684\\u72B6\\u6001\\u503C\\u53EA\\u662F\\u4E2D\\u95F4\\u8FC7\\u7A0B\\u3001\\u6216\\u8005\\u9891\\u7E41\\u53D8\\u52A8\\u3001\\u6216\\u8005\\u53EF\\u4EE5\\u4E0D\\u66F4\\u65B0\\u754C\\u9762\\u4E4B\\u7C7B\\u7684\\u60C5\\u51B5\\uFF0C\\u53EF\\u4EE5\\u5728\\u6B64\\u5904\\u7EDF\\u4E00\\u5904\\u7406\\u3002\"), mdx(\"h3\", null, \"1. \\u7EC4\\u4EF6\\u8981\\u4E0D\\u8981 render \\u6E32\\u67D3\\u7531\\u4EC0\\u4E48\\u51B3\\u5B9A\\uFF1F\"), mdx(\"p\", null, \"\\u5148\\u770B\\u751F\\u547D\\u5468\\u671F\\u5F88\\u6E05\\u6670\\u7684 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"React.Component\"), \" \\u7EC4\\u4EF6:\"), mdx(PerForDemo1, {\n mdxType: \"PerForDemo1\"\n }), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u81EA\\u8EAB\\u72B6\\u6001\\u53D8\\u66F4 / \\u4F20\\u9012\\u5C5E\\u6027\\u53D8\\u66F4 \\u5C31\\u4F1A\\u5BFC\\u81F4\\u91CD\\u65B0\\u6E32\\u67D3\\u3002\\u5373\\u4F7F\\u72B6\\u6001\\u6CA1\\u6709\\u88AB\\u4F7F\\u7528\\uFF0C\\u5373\\u4F7F\\u72B6\\u6001\\u503C\\u6CA1\\u6709\\u53D8\\u52A8\\u3002\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u7236\\u7EC4\\u4EF6\\u6E32\\u67D3\\u4F1A\\u5BFC\\u81F4\\u5B50\\u7EC4\\u4EF6\\u91CD\\u65B0\\u6E32\\u67D3\\u3002\\u5373\\u4F7F\\u7236\\u7EC4\\u4EF6\\u7684\\u72B6\\u6001\\u53D8\\u66F4\\u6CA1\\u6709\\u6D89\\u53CA\\u5B50\\u7EC4\\u4EF6\\u7684\\u4F9D\\u8D56\\u3002\")), mdx(\"p\", null, \"Component \\u4F1A\\u51FA\\u73B0\\u4E0D\\u5FC5\\u8981\\u7684\\u6E32\\u67D3\\u95EE\\u9898\\uFF0C\\u800C\\u5E73\\u65F6\\u63A8\\u8350\\u7684\\u53E6\\u4E00\\u4E2A\\u7EC4\\u4EF6 \", mdx(\"strong\", {\n parentName: \"p\"\n }, mdx(\"inlineCode\", {\n parentName: \"strong\"\n }, \"React.PureComponent\")), \":\"), mdx(PerForDemo2, {\n mdxType: \"PerForDemo2\"\n }), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u5982\\u679C\\u72B6\\u6001\\u6CA1\\u6709\\u88AB\\u4F7F\\u7528\\uFF0C\\u6216\\u8005\\u72B6\\u6001\\u503C\\u6CA1\\u6709\\u53D8\\u52A8\\u5219\\u4E0D\\u4F1A\\u91CD\\u65B0\\u6E32\\u67D3\\u3002\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u7236\\u7EC4\\u4EF6\\u7684\\u72B6\\u6001\\u53D8\\u66F4\\u6CA1\\u6709\\u6D89\\u53CA\\u5B50\\u7EC4\\u4EF6\\u7684\\u4F9D\\u8D56\\uFF0C\\u6216\\u8005\\u4F20\\u9012\\u503C\\u6CA1\\u6709\\u53D8\\u5316\\uFF0C\\u5B50\\u7EC4\\u4EF6\\u5C31\\u4E0D\\u4F1A\\u53D8\\u52A8\\u3002\")), mdx(\"p\", null, \"PureComponent \\u76F8\\u6BD4 Component \\u6027\\u80FD\\u66F4\\u597D\\u4E9B\\uFF0C\\u56E0\\u4E3A\\u5728 props \\u548C state \\u53D8\\u52A8\\u4E4B\\u540E\\uFF0CPureComponent \\u4F7F\\u7528 \", mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\u6D45\\u5BF9\\u6BD4\"), \" \\u7684\\u903B\\u8F91\\u5B9E\\u73B0 shouldComponentUpdate \\u8BA1\\u7B97\\u6210\\u672C\\u975E\\u5E38\\u4F4E\\u4F46\\u662F\\u5F88\\u6709\\u6548\\u7684\\u6027\\u80FD\\u4F18\\u5316\\u3002\"), mdx(\"p\", null, \"\\u4E0D\\u8FC7\\u9700\\u8981\\u6CE8\\u610F\\u7684\\u662F\\uFF0C\\u53EF\\u80FD\\u6709\\u65F6\\u5019\\u5BF9\\u8C61\\u6DF1\\u5C42\\u6570\\u636E\\u4E0D\\u4E00\\u81F4\\u5BFC\\u81F4\\u9700\\u8981\\u6E32\\u67D3\\u7684\\u65F6\\u5019\\u6CA1\\u6709\\u66F4\\u65B0\\u754C\\u9762\\uFF0C\\u6216\\u8005\\u76F8\\u540C\\u5C5E\\u6027\\u7684\\u4E0D\\u540C\\u5BF9\\u8C61\\u88AB\\u5224\\u65AD\\u4E3A\\u4E0D\\u540C\\u7684\\u503C\\u5F15\\u53D1\\u4E0D\\u5FC5\\u8981\\u7684\\u6E32\\u67D3\\u3002\"), mdx(\"h3\", null, \"2. \\u7406\\u89E3\\u6D45\\u6BD4\\u8F83 shallowCompare\"), mdx(\"p\", null, \"\\u4E0A\\u9762\\u8BF4\\u4E86 PureComponent \\u7684\\u4F18\\u5316\\uFF0C\\u6D89\\u53CA\\u5230\\u6D45\\u6BD4\\u8F83\\uFF0C\\u4E0B\\u9762\\u662F\\u6838\\u5FC3\\u7684\\u903B\\u8F91\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"if (this._compositeType === CompositeTypes.PureClass) {\\n shouldUpdate = !shallowEqual(prevProps, nextProps) || ! shallowEqual(inst.state, nextState);\\n}\\n\")), mdx(\"p\", null, \"\\u5176\\u4E2D \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/facebook/react/blob/a9b035b0c2b8235405835beca0c4db2cc37f18d0/packages/shared/shallowEqual.js\"\n }, \"shallowEqual \\u6E90\\u7801\"), \"\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-ts\"\n }, \"function shallowEqual(objA: mixed, objB: mixed): boolean {\\n // \\u6700\\u7B80\\u5355\\u7684\\u6D45\\u5C42\\u6BD4\\u8F83\\n if (Object.is(objA, objB)) return true;\\n\\n // \\u4E00\\u4E9B\\u8FB9\\u754C\\u6761\\u4EF6\\u548C\\u7B80\\u5355\\u7C7B\\u578B\\u6570\\u636E\\u5224\\u5B9A\\n if (\\n typeof objA !== 'object' ||\\n objA === null ||\\n typeof objB !== 'object' ||\\n objB === null\\n ) {\\n return false;\\n }\\n\\n // \\u4E0B\\u9762\\u6DF1\\u5165\\u6BD4\\u8F83\\n\\n const keysA = Object.keys(objA);\\n const keysB = Object.keys(objB);\\n\\n // \\u5982\\u679C\\u5C5E\\u6027\\u957F\\u5EA6\\u4E0D\\u540C\\n if (keysA.length !== keysB.length) return false;\\n\\n // \\u63A5\\u4E0B\\u6765\\u904D\\u5386\\u5C5E\\u6027\\u6BD4\\u8F83\\uFF0C\\u8BA1\\u7B97\\u53EF\\u80FD\\u8F83\\u591A\\uFF0C\\u6240\\u4EE5\\u653E\\u5230\\u6700\\u540E\\u3002\\u5C5E\\u6027\\u5DEE\\u5F02\\uFF0C\\u6216\\u8005\\u4E24\\u8005\\u540C\\u4E00\\u4E2A\\u5C5E\\u6027\\u4E0D\\u76F8\\u7B49\\n for (let i = 0; i < keysA.length; i++) {\\n if (\\n !Object.prototype.hasOwnProperty.call(objB, keysA[i]) ||\\n !Object.is(objA[keysA[i]], objB[keysA[i]])\\n ) {\\n return false;\\n }\\n }\\n return true;\\n}\\n\")), mdx(\"p\", null, \"\\u7528\\u51E0\\u4E2A\\u4F8B\\u5B50\\u5C31\\u80FD\\u77E5\\u9053\\uFF1A\"), mdx(RunTSX, {\n isWhiteTheme: true,\n codeStr: \"__helper.log(Object.is(null, undefined)); // false\\n__helper.log(Object.is(NaN, NaN)); // true\\n__helper.log(Object.is(-0, +0)); // false\\n__helper.log(Object.is({a:1,b:2}, {a:1,b:2})); // false\\n\\nconst c = {a: 0, b: 1, c: 2}\\nconst d = c\\nd.c = 4\\n// \\u5C5E\\u6027\\u53D8\\u52A8\\uFF0C\\u4F46\\u662F\\u6D45\\u6BD4\\u8F83\\u5224\\u65AD\\u76F8\\u540C\\uFF0C\\u5BFC\\u81F4 shouldComponentUpdate \\u5224\\u65AD\\u4E0D\\u9700\\u8981\\u66F4\\u65B0\\uFF0C\\u51FA\\u73B0\\u95EE\\u9898\\n__helper.log(Object.is(c, d)); // true\\n\\nconst e = {a: 0, b: 1, c: 2}\\nconst f = Object.assign({}, e)\\nf.c = 4\\n// Object.assign \\u53EF\\u4EE5\\u907F\\u514D\\u5F15\\u7528\\u76F8\\u540C\\uFF0C\\u4F46\\u662F\\u5BF9\\u4E8E\\u591A\\u5C42\\u5D4C\\u5957\\u8FD8\\u662F\\u6CA1\\u529E\\u6CD5\\n__helper.log(Object.is(e, f)); // true\\n\\n\\nfunction shallowEqual(objA: any, objB: any) {\\n if (Object.is(objA, objB)) {\\n return true;\\n }\\n if (\\n typeof objA !== 'object' ||\\n objA === null ||\\n typeof objB !== 'object' ||\\n objB === null\\n ) {\\n return false;\\n }\\n const keysA = Object.keys(objA);\\n const keysB = Object.keys(objB);\\n if (keysA.length !== keysB.length) {\\n return false;\\n }\\n for (let i = 0; i < keysA.length; i++) {\\n if (\\n !Object.prototype.hasOwnProperty.call(objB, keysA[i]) ||\\n !Object.is(objA[keysA[i]], objB[keysA[i]])\\n ) {\\n return false;\\n }\\n }\\n return true;\\n}\",\n mdxType: \"RunTSX\"\n }), mdx(\"p\", null, \"\\u6240\\u4EE5\\u5BF9\\u4E8E\\u4F20\\u9012\\u6570\\u636E\\u662F\\u57FA\\u7840\\u6570\\u636E\\u7C7B\\u578B\\u7684\\u503C\\uFF0C\\u65E0\\u8111\\u7528 PureComponent \\u5C31\\u884C\\u4E86\\uFF0C\\u5BF9\\u4E8E\\u5F15\\u7528\\u76F8\\u540C\\u7684\\u6570\\u636E\\u7ED3\\u6784\\u6784\\uFF0C\\u5219\\u53EF\\u80FD\\u51FA\\u73B0\\u89C6\\u56FE\\u65E0\\u6CD5\\u66F4\\u65B0\\u95EE\\u9898\\uFF0C\\u9700\\u8981\\u81EA\\u5DF1\\u5904\\u7406\\u6BD4\\u8F83\\u7684\\u90E8\\u5206\\u6216\\u8005\\u4F7F\\u7528 immutable \\u7684\\u5904\\u7406\\u65B9\\u5F0F\\u3002\"), mdx(\"h3\", null, \"3. \\u7406\\u89E3 render \\u51FD\\u6570\\u6267\\u884C\\u7684\\u90E8\\u5206\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, \"\\u53EF\\u80FD\\u9891\\u7E41\\u6267\\u884C\\u7684\\u7EAF\\u51FD\\u6570\\u7684\\u8F93\\u51FA\\uFF0C\\u4E0D\\u5E94\\u8BE5\\u5305\\u542B\\u526F\\u4F5C\\u7528\\u548C\\u53EF\\u7F13\\u5B58\\u7684\\u91CD\\u590D\\u8BA1\\u7B97\\u3002render \\u5728\\u7EC4\\u4EF6\\u610F\\u4E49\\u91CC\\u9762\\u8868\\u793A\\u7684\\u662F\\u6784\\u5EFA\\u89C6\\u56FE\\u5C42\\u7684\\u903B\\u8F91\\uFF0C\\u5B58\\u5728\\u7684\\u610F\\u4E49\\u4EC5\\u5728\\u4E8E\\u6839\\u636E\\u73B0\\u6709\\u7684\\u72B6\\u6001\\u548C\\u6570\\u636E\\u8F93\\u51FA\\u7EC4\\u4EF6\\u5185\\u5BB9\\u3002\\u5728\\u6B64\\u610F\\u4E49\\u4E0A\\u6765\\u8BB2\\uFF0C\\u8FD9\\u5C31\\u662F\\u4E2A\\u7EAF\\u51FD\\u6570\\u7EC4\\u4EF6\\uFF0C\\u4E0D\\u5E94\\u8BE5\\u51FA\\u73B0\\u526F\\u4F5C\\u7528\\u6216\\u8005\\u66F4\\u65B0\\u72B6\\u6001\\u4E4B\\u7C7B\\u7684\\u903B\\u8F91\\uFF0C\\u66F4\\u4E0D\\u5E94\\u8BE5\\u5B58\\u5728\\u80FD\\u591F\\u7F13\\u5B58\\u7684\\u8BA1\\u7B97\\uFF0C\\u4EC5\\u5E94\\u8BE5\\u51FA\\u73B0\\u8F93\\u51FA\\u76F8\\u5173\\u7684\\u90E8\\u5206\\uFF0C\\u5982\\u679C\\u6709\\u8BA1\\u7B97\\u5C5E\\u6027\\u6BD4\\u5982\\u9700\\u8981\\u8BA1\\u7B97 10000 \\u591A\\u4E2A\\u4EBA\\u7684\\u5E73\\u5747\\u8EAB\\u9AD8\\uFF0C\\u4E0D\\u5E94\\u8BE5\\u5728 render \\u91CC\\u9762\\u8BA1\\u7B97\\uFF0C\\u800C\\u5E94\\u8BE5\\u5728\\u53D8\\u66F4\\u7684\\u65F6\\u5019\\u8BA1\\u7B97\\u51FA\\u7ED3\\u679C\\u7F13\\u5B58\\u8D77\\u6765\\u518D render\\u3002\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"p\", {\n parentName: \"li\"\n }, \"render \\u7684\\u6267\\u884C\\u5B8C\\u6BD5\\u4EC5\\u8868\\u793A\\u7EC4\\u4EF6\\u903B\\u8F91\\u4EA4\\u7ED9\\u4E86 react\\uFF0C\\u7ED8\\u5236\\u5230\\u754C\\u9762\\u662F\\u7531 react \\u63A5\\u7BA1\\u7684\\u3002render \\u51FD\\u6570\\u5E76\\u4E0D\\u662F\\u76F4\\u63A5\\u8F93\\u51FA\\u754C\\u9762\\u5185\\u5BB9\\u7684\\uFF0C\\u800C\\u662F\\u4EC5\\u8F93\\u51FA\\u4E00\\u4E2A\\u63CF\\u8FF0\\u7ED3\\u6784\\uFF0C\\u7136\\u540E react \\u6846\\u67B6\\u63A5\\u7BA1\\u8C03\\u5EA6\\u5230\\u865A\\u62DF DOM \\u6700\\u540E\\u624D\\u4F1A\\u5728\\u754C\\u9762\\u4E0A\\u770B\\u5230\\u7ED3\\u679C\\u3002\"))), mdx(\"h3\", null, \"4. \\u7406\\u89E3 props \\u548C state \\u6765\\u8282\\u7701\\u8BA1\\u7B97\"), mdx(\"p\", null, \"\\u8FD9\\u91CC\\u60F3\\u8868\\u8FBE\\u7684\\u662F props \\u548C state \\u5B58\\u5728\\u7684\\u610F\\u4E49\\u5B8C\\u5168\\u4E0D\\u540C\\uFF0C\\u4F46\\u662F\\u53D8\\u66F4\\u90FD\\u80FD\\u5BFC\\u81F4\\u7EC4\\u4EF6\\u6E32\\u67D3\\u3002props \\u548C state \\u5982\\u65E0\\u5FC5\\u8981\\u5C3D\\u91CF\\u5C11\\u8BBE\\u7F6E\\uFF0C\\u800C\\u4E14\\u6BCF\\u4E00\\u4E2A\\u503C\\u90FD\\u8981\\u8FDB\\u884C\\u53D8\\u66F4\\u903B\\u8F91\\u4F18\\u5316\\uFF0C\\u6BD4\\u5982\\u6BCF\\u6B21\\u6E32\\u67D3\\u662F\\u5426\\u4F1A\\u53D8\\u66F4\\uFF0C\\u662F\\u5426\\u4F7F\\u7528\\u4E86\\u7ECF\\u5E38\\u53D1\\u751F\\u53D8\\u5316\\u7684\\u5F15\\u7528\\u503C\\u4E4B\\u7C7B\\u7684\\u3002\"), mdx(\"p\", null, \"\\u6BD4\\u5982\\u4E0B\\u9762\\u793A\\u4F8B columns \\u548C onSelect \\u6BCF\\u6B21 render \\u7684\\u65F6\\u5019\\u90FD\\u4F1A\\u53D8\\u66F4\\uFF0C\\u90FD\\u662F\\u6CA1\\u6709\\u5FC5\\u8981\\u7684\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"class TableDemo extends React.Component {\\n getColumns = () => {\\n return [\\n { key: 'name', title: '\\u59D3\\u540D' },\\n { key: 'age', title: '\\u5E74\\u9F84' },\\n { key: 'more', title: `${this.state.action}\\u64CD\\u4F5C` },\\n ];\\n };\\n render() {\\n return this.onSelect(key)} />;\\n }\\n}\\n\")), mdx(\"p\", null, \"state \\u662F\\u7EC4\\u4EF6\\u7684\\u72B6\\u6001\\uFF1Bprops \\u662F\\u7EC4\\u4EF6\\u7684\\u63A5\\u53E3\\uFF1Bstate \\u7684\\u5B58\\u5728\\u662F\\u4E3A\\u4E86\\u4FDD\\u5B58\\u8BA9 UI \\u54CD\\u5E94\\u53D8\\u5316\\u7684\\u5C5E\\u6027\\uFF0C\\u4E0E\\u5185\\u90E8\\u76F8\\u5173\\uFF0C\\u53EF\\u4EE5\\u6839\\u636E\\u4E0D\\u540C\\u7684\\u903B\\u8F91\\u8FDB\\u884C\\u53D8\\u66F4\\u4FEE\\u6539\\u3002props \\u7684\\u5B58\\u5728\\u662F\\u4E3A\\u4E86\\u63A5\\u6536\\u5916\\u90E8\\u7684\\u72B6\\u6001\\u80FD\\u591F\\u5F71\\u54CD UI \\u7684\\u8F93\\u5165\\uFF0C\\u662F\\u5355\\u5411\\u4F20\\u8F93\\u4E0D\\u53EF\\u4EE5\\u4FEE\\u6539\\u7684\\u3002\\u5BF9\\u4E8E\\u6CA1\\u6709\\u5916\\u90E8\\u526F\\u4F5C\\u7528\\u7684\\u7EC4\\u4EF6\\uFF0Cstate \\u548C props \\u80FD\\u591F\\u786E\\u5B9A\\u4E00\\u4E2A\\u7EC4\\u4EF6\\u7684\\u8868\\u73B0\\u3002\"), mdx(\"p\", null, \"props \\u548C state \\u786E\\u5B9A\\u7EC4\\u4EF6\\u8868\\u73B0\\u6700\\u5E38\\u89C1\\u7684\\u4E00\\u4E2A\\u4F8B\\u5B50\\uFF1A\", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://zh-hans.reactjs.org/docs/forms.html#controlled-components\"\n }, \"\\u53D7\\u63A7\\u7EC4\\u4EF6\"), \"\\u3002\\u4E00\\u4E2A\\u8868\\u5355\\u7EC4\\u4EF6\\uFF0C\\u5916\\u90E8\\u8F93\\u5165\\u521D\\u59CB\\u503C\\uFF0C\\u5185\\u90E8\\u7EF4\\u62A4\\u771F\\u5B9E\\u503C\\uFF0C\\u7136\\u540E\\u901A\\u8FC7\\u5916\\u90E8\\u7684\\u76D1\\u542C\\u51FD\\u6570\\u53CD\\u9988\\u72B6\\u6001\\u53D8\\u66F4\\uFF0C\\u5355\\u4E00\\u6570\\u636E\\u6E90\\u539F\\u5219\\u3002\"), mdx(\"h3\", null, \"5. \\u7406\\u89E3 getDerivedStateFromProps\"), mdx(\"p\", null, \"\\u5B98\\u65B9\\u4E5F\\u6DF1\\u5165\\u7684\\u8BF4\\u4E86\\u8FD9\\u4E2A\\u95EE\\u9898\\uFF1A \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://zh-hans.reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#when-to-use-derived-state\"\n }, \"\\u4F60\\u53EF\\u80FD\\u4E0D\\u9700\\u8981\\u4F7F\\u7528\\u6D3E\\u751F state\"), \"\\u3002\"), mdx(\"p\", null, \"componentWillReceiveProps \\u662F\\u5DEE\\u4E0D\\u591A\\u7684\\u601D\\u60F3\\uFF0C\\u5C31\\u662F\\u5728 props \\u53D8\\u66F4\\u7684\\u65F6\\u5019\\u8FD0\\u884C\\uFF0C\\u4E0D\\u540C\\u7684\\u662F getDerivedStateFromProps \\u662F\\u4E00\\u4E2A\\u65B0\\u7684\\u63A5\\u53E3\\uFF0C\\u800C componentWillReceiveProps \\u5DF2\\u7ECF\\u5E9F\\u5F03\\u4E86\\uFF0C\\u4E3A\\u4EC0\\u4E48\\u5E9F\\u5F03\\u6682\\u4E14\\u4E0D\\u8BF4\\u3002\"), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u5468\\u671F\\u51FD\\u6570\\u4E00\\u822C\\u662F\\u5F88\\u4E0D\\u5EFA\\u8BAE\\u4F7F\\u7528\\u7684\\uFF0C\\u56E0\\u4E3A\\u8FD9\\u4E2A\\u51FD\\u6570\\u94A9\\u5B50\\u5B58\\u5728\\u7684\\u76EE\\u7684\\u5728\\u4E8E\\uFF1A\\u8BA9\\u67D0\\u4E2A state \\u5B8C\\u5168\\u4F9D\\u8D56\\u4E0E props \\u7684\\u53D8\\u66F4\\uFF0C\\u8BA9\\u7EC4\\u4EF6\\u5728 props \\u53D8\\u5316\\u65F6\\u66F4\\u65B0 state\\uFF0C\\u9664\\u6B64\\u4E4B\\u5916\\u4E0D\\u5E94\\u8BE5\\u4F7F\\u7528\\u8FD9\\u4E2A\\u63A5\\u53E3\\u3002\\u6BD4\\u5982 props \\u7684 offset \\u53D8\\u5316\\u65F6\\uFF0C\\u4FEE\\u6539\\u5F53\\u524D\\u7684\\u6EDA\\u52A8\\u65B9\\u5411\\u548C\\u6839\\u636E props \\u53D8\\u5316\\u52A0\\u8F7D\\u5916\\u90E8\\u6570\\u636E\\u3002\"), mdx(\"p\", null, \"\\u4E3A\\u4EC0\\u4E48\\u8FD9\\u4E48\\u5F3A\\u8C03\\u5462\\uFF0C\\u56E0\\u4E3A\\u4E0A\\u9762\\u63D0\\u5230\\u7684\\u539F\\u5219\\uFF0Cstate \\u662F\\u5185\\u90E8\\u7684\\uFF0Cprops \\u662F\\u5916\\u90E8\\u7684\\u3002\\u4E0D\\u5E94\\u8BE5\\u4E0B\\u9762\\u8FD9\\u4E24\\u79CD\\u60C5\\u51B5\\uFF0C\\u5B9E\\u9645\\u4E0A\\u5F88\\u591A\\u5B9E\\u8DF5\\u90FD\\u662F\\u8FD9\\u4E48\\u5E72\\u7684\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u76F4\\u63A5\\u590D\\u5236 props \\u5230 state \\u4E0A\\uFF1B\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u5982\\u679C props \\u548C state \\u4E0D\\u4E00\\u81F4\\u5C31\\u66F4\\u65B0 state\\u3002\")), mdx(\"p\", null, \"\\u8FD9\\u4E48\\u505A\\u6CA1\\u95EE\\u9898\\uFF0C\\u4F46\\u662F\\u7ECF\\u5E38\\u4F1A\\u51FA\\u73B0\\u4E00\\u4E9B\\u601D\\u60F3\\u4E0A\\u7684\\u95EE\\u9898\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u53D7\\u63A7/\\u975E\\u53D7\\u63A7\\u7EC4\\u4EF6\"), \"\\u3002\\u5982\\u679C state \\u6839\\u636E props \\u6539\\u53D8\\uFF0C\\u540C\\u65F6\\u8FD8\\u80FD\\u6839\\u636E\\u7528\\u6237\\u64CD\\u4F5C\\u6539\\u53D8\\uFF0C\\u90A3\\u4E48\\u5C31\\u4F1A\\u51FA\\u73B0\\u4E0D\\u4E00\\u81F4\\u7684\\u4F53\\u9A8C\\u3002\\u6BD4\\u5982\\u8868\\u5355\\u4E2D props \\u63A7\\u5236\\u663E\\u793A\\u8FD8\\u662F state \\u63A7\\u5236\\u663E\\u793A\\u7684\\u7EDF\\u4E00\\u3002\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u53EA\\u8981\\u7236\\u7EC4\\u4EF6\\u91CD\\u65B0\\u6E32\\u67D3\\uFF0C\\u5B50\\u7EC4\\u4EF6\\u7684\\u8FD9\\u4E2A\\u51FD\\u6570\\u5C31\\u4F1A\\u88AB\\u8C03\\u7528\\uFF0C\\u65E0\\u8BBA\\u6709\\u6CA1\\u6709 props \\u6709\\u6CA1\\u6709\\u53D8\\u66F4\\uFF0C\\u7136\\u540E \", mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u5BFC\\u81F4\\u4E0D\\u5FC5\\u8981\\u7684\\u8BA1\\u7B97\"), \"\\u3002\")), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#fetching-external-data-when-props-change\"\n }, \"\\u5F53 props \\u53D8\\u5316\\u65F6\\uFF0C\\u8FDB\\u884C\\u8BA1\\u7B97\"), \"\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"class ExampleComponent extends React.Component {\\n state = {\\n externalData: null,\\n };\\n\\n static getDerivedStateFromProps(props, state) {\\n // Store prevId in state so we can compare when props change.\\n // Clear out previously-loaded data (so we don't render stale stuff).\\n if (props.id !== state.prevId) {\\n return {\\n externalData: null,\\n prevId: props.id,\\n };\\n }\\n // No state update necessary\\n return null;\\n }\\n\\n componentDidMount() {\\n this._loadAsyncData(this.props.id);\\n }\\n\\n componentDidUpdate(prevProps, prevState) {\\n if (this.state.externalData === null) {\\n this._loadAsyncData(this.props.id);\\n }\\n }\\n\\n componentWillUnmount() {\\n if (this._asyncRequest) {\\n this._asyncRequest.cancel();\\n }\\n }\\n\\n render() {\\n if (this.state.externalData === null) {\\n // Render loading state ...\\n } else {\\n // Render real UI ...\\n }\\n }\\n\\n _loadAsyncData(id) {\\n this._asyncRequest = loadMyAsyncData(id).then(\\n externalData => {\\n this._asyncRequest = null;\\n this.setState({externalData});\\n }\\n );\\n }\\n}\\n\")), mdx(\"h3\", null, \"6. \\u7406\\u89E3 memo \\u7F13\\u5B58\\u8BA1\\u7B97\\u548C\\u7EC4\\u4EF6\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\u8017\\u65F6\\u8BA1\\u7B97\\u7684\\u7F13\\u5B58\")), mdx(\"p\", null, \"\\u4E0A\\u9762\\u8BF4\\u4E86\\u53D7\\u63A7\\u975E\\u53D7\\u63A7\\u7EC4\\u4EF6\\uFF0C\\u5C3D\\u91CF\\u4E0D\\u80FD\\u76F4\\u63A5\\u5C06 props \\u590D\\u5236\\u5230 state \\u7684\\u5B9E\\u8DF5\\u539F\\u5219\\uFF0C\\u90A3\\u4E48\\u600E\\u4E48\\u624D\\u80FD\\u5C06\\u590D\\u6742\\u7684 props \\u8BA1\\u7B97\\u7F13\\u5B58\\u4EE5\\u907F\\u514D\\u590D\\u6742\\u7684\\u8BA1\\u7B97\\uFF1F\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"import memoize from \\\"memoize-one\\\";\\n\\nclass Example extends Component {\\n // state \\u53EA\\u9700\\u8981\\u4FDD\\u5B58\\u5F53\\u524D\\u7684 filter \\u503C\\uFF1A\\n state = { filterText: \\\"\\\" };\\n\\n // \\u5728 list \\u6216\\u8005 filter \\u53D8\\u5316\\u65F6\\uFF0C\\u91CD\\u65B0\\u8FD0\\u884C filter\\uFF1A\\n filter = memoize(\\n (list, filterText) => list.filter(item => item.text.includes(filterText))\\n );\\n\\n handleChange = event => {\\n this.setState({ filterText: event.target.value });\\n };\\n\\n render() {\\n // \\u8BA1\\u7B97\\u6700\\u65B0\\u7684\\u8FC7\\u6EE4\\u540E\\u7684 list\\u3002\\n // \\u5982\\u679C\\u548C\\u4E0A\\u6B21 render \\u53C2\\u6570\\u4E00\\u6837\\uFF0C`memoize-one` \\u4F1A\\u91CD\\u590D\\u4F7F\\u7528\\u4E0A\\u4E00\\u6B21\\u7684\\u503C\\u3002\\n const filteredList = this.filter(this.props.list, this.state.filterText);\\n\\n return (\\n \\n \\n \\n \\n );\\n }\\n}\\n\")), mdx(\"p\", null, \"\\u7B54\\u6848\\u5C31\\u662F\\u4F7F\\u7528 memoize \\u7F13\\u5B58\\u8BA1\\u7B97\\uFF0C\\u53EF\\u4EE5\\u76F4\\u63A5\\u4F7F\\u7528 props \\u7684\\u503C\\uFF0C\\u4F46\\u662F\\u4E0D\\u5FC5\\u8BA1\\u7B97\\u989D\\u5916\\u7684 state\\u3002\\u8FD9\\u4E2A\\u601D\\u60F3\\u4E5F\\u662F\\u5F88\\u591A\\u6781\\u81F4\\u6027\\u80FD\\u7684\\u4E00\\u4E2A\\u5F88\\u91CD\\u8981\\u7684\\u5B9E\\u8DF5\\u3002\"), mdx(\"p\", null, \"\\u5728 React \\u51FD\\u6570\\u4E2D\\u53EF\\u4EE5\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"useMemo\"), \" \\u6765\\u7F13\\u5B58\\u8BA1\\u7B97\\u3002\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\u51FD\\u6570\\u7EC4\\u4EF6\\u7684\\u7F13\\u5B58\")), mdx(\"p\", null, \"\\u7236\\u7EC4\\u4EF6\\u548C\\u672C\\u8EAB\\u7684\\u72B6\\u6001\\u51B3\\u5B9A\\u4E00\\u4E2A\\u7EC4\\u4EF6\\u662F\\u5426\\u8981\\u91CD\\u65B0\\u6E32\\u67D3\\uFF0C\\u4F46\\u662F\\u5F88\\u591A\\u7684\\u7EC4\\u4EF6\\u6E32\\u67D3\\u5E76\\u6CA1\\u6709\\u5FC5\\u8981\\u3002\"), mdx(\"p\", null, \"class \\u7EC4\\u4EF6\\u672C\\u8EAB\\u80FD\\u591F\\u62E6\\u622A\\u6E32\\u67D3\\u51FD\\u6570\\uFF0C\\u6700\\u7EC8\\u4E5F\\u80FD\\u88AB shouldComponentUpdate \\u62E6\\u622A\\u8FD9\\u4E2A\\u6E32\\u67D3\\u51B3\\u5B9A\\uFF0C\\u6709\\u81EA\\u5DF1\\u7684\\u4E3B\\u6743\\u3002\\u4F46\\u662F\\u51FD\\u6570\\u7EC4\\u4EF6\\u53EA\\u8981\\u6D41\\u7A0B\\u8D70\\u5230\\u51FD\\u6570\\u7EC4\\u4EF6\\u8FD9\\u91CC\\uFF0C\\u90A3\\u4E48\\u6574\\u4E2A\\u51FD\\u6570\\u672C\\u8EAB\\u5C31\\u4F1A\\u6267\\u884C\\u5230\\u5E95\\uFF0C\\u5305\\u62EC\\u5176\\u4E2D\\u7684\\u5B50\\u7EC4\\u4EF6\\uFF0C\\u5982\\u679C\\u4E0D\\u52A0\\u4EFB\\u4F55\\u63A7\\u5236\\uFF0C\\u6839\\u7EC4\\u4EF6\\u7684\\u4E00\\u4E2A\\u72B6\\u6001\\u53D8\\u66F4\\uFF0C\\u5168\\u5C40\\u7684\\u5168\\u90E8\\u7EC4\\u4EF6\\u90FD\\u4F1A\\u6E32\\u67D3\\uFF0C\\u9020\\u6210\\u975E\\u5E38\\u5927\\u7684\\u5361\\u987F\\u3002\"), mdx(\"p\", null, \"\\u51FD\\u6570\\u7EC4\\u4EF6\\u6709\\u6CA1\\u6709\\u7C7B\\u4F3C PureComponent \\u6216\\u8005 shouldComponentUpdate \\u7684\\u4E1C\\u897F\\u5462\\uFF1F\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"React.memo\"), \" \\u8FD9\\u4E2A\\u4E1C\\u897F\\u80FD\\u591F\\u4EE3\\u66FF\\u524D\\u4E24\\u4E2A\\u7684\\u4F5C\\u7528\\u3002\"), mdx(\"p\", null, \"React \\u6709\\u9876\\u5C42\\u7684\\u51FD\\u6570\\u63A5\\u53E3 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"React.memo\"), \" \\u6765\\u5B9E\\u73B0\\u7EC4\\u4EF6\\u7EA7\\u522B\\u7684\\u7F13\\u5B58\\uFF0C\\u53EF\\u4EE5\\u4FDD\\u8BC1\\u5728\\u76F8\\u540C\\u7684 props \\u8F93\\u5165\\u60C5\\u51B5\\u4E0B\\u6E32\\u67D3\\u76F8\\u540C\\u7684\\u7ED3\\u679C\\uFF0C\\u7F13\\u5B58\\u7EC4\\u4EF6\\u7684\\u8BA1\\u7B97\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"const MyComponent = React.memo(function MyComponent(props) {\\n /* \\u4F7F\\u7528 props \\u6E32\\u67D3 */\\n});\\n\")), mdx(\"p\", null, \"\\u9700\\u8981\\u6CE8\\u610F\\u7684\\u662F\\u8FD9\\u91CC\\u7684 props \", mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\u76F8\\u540C\"), \" \\u8FD8\\u662F\\u4E0A\\u9762\\u8BF4\\u7684\\u3010\\u6D45\\u6BD4\\u8F83\\u3011\\uFF0C\\u4E0D\\u8FC7\\u53EF\\u4EE5\\u901A\\u8FC7\\u7B2C\\u4E8C\\u53C2\\u6570\\u6307\\u5B9A\\u6BD4\\u8F83\\u51FD\\u6570\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"function MyComponent(props) {\\n /* \\u4F7F\\u7528 props \\u6E32\\u67D3 */\\n}\\nfunction areEqual(prevProps, nextProps) {\\n /*\\n \\u5982\\u679C\\u628A nextProps \\u4F20\\u5165 render \\u65B9\\u6CD5\\u7684\\u8FD4\\u56DE\\u7ED3\\u679C\\u4E0E\\n \\u5C06 prevProps \\u4F20\\u5165 render \\u65B9\\u6CD5\\u7684\\u8FD4\\u56DE\\u7ED3\\u679C\\u4E00\\u81F4\\u5219\\u8FD4\\u56DE true\\uFF0C\\n \\u5426\\u5219\\u8FD4\\u56DE false\\n */\\n}\\nexport default React.memo(MyComponent, areEqual);\\n\")), mdx(\"h3\", null, \"7. \\u7406\\u89E3\\u751F\\u547D\\u5468\\u671F\"), mdx(\"p\", null, mdx(\"figure\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-figure\",\n \"style\": {}\n }, \"\\n \", mdx(\"span\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"1035px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/28589c0053b1c16dd40d62016802ac5e/511b8/lifecycle.png\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"58.301158301158296%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsSAAALEgHS3X78AAACE0lEQVQoz21Ti27bMAzM///dhibr2sR2Y1m2Jfkl62U3zY1Ul2EdJoCQSNHHO4o+3O93sPHa9x3eB/R9T7vHtm2IMSKlhBACuq6Dcy77D+N7rTWWZcn5hwcgG380TxOOxyOGYcgfL4vNReZ5xul0gjEm5/GdtRbruuL5+Rl1XWcSB/y1rEsoW4fjWeLS2Oy7dcZgNGIg8Hki38JohXE0GZRBuAAzZT8D3m43YvhBABFvvcfL24Cqc2i0x7UdUQkDqW0+d4OHUBZSzRngU8XyB/zADksRooYLCXKIkIb6NRJbOWe2T68SP6lIIS2EiWhMQkvALPch/QF+4MZyU7lHiWhv0SGQzBRW3DYPNazEWOPl3OAHgathwR6pr275A/IF8GsPI2qdUJHsWkdik3CRK54uGkVhUKsNYrzhqmnX/DBfGWbJfGCGhhq/ugA10diMjnYPzWe66zqBTncQzRWyFVB0nibzf8n8Qjx3PCb7vuHjtpF0j/c9kiXcU497KGHVCUPzHVP3hN2eKS7zy+7vO2KKeYbZDjyMSqk8bx+7A1IJ+HPe03TC3H6D7Y/Y5lcgVjT9Ne0lFWmo4Dv+XVly0wiMw4i0BXq9GoV4wbUr4MOCyZLkSdCoVJ/x9gK9SCx+QIicL2kaCsp/o7j6/FMei6mXosTlekFREyBJt8FSokbVVDnO1k09Zj9nwLIpf8fPaI3EL6hXkSpMJITHAAAAAElFTkSuQmCC')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"React 生命周期\",\n \"title\": \"React 生命周期\",\n \"src\": \"/static/28589c0053b1c16dd40d62016802ac5e/0dc48/lifecycle.png\",\n \"srcSet\": [\"/static/28589c0053b1c16dd40d62016802ac5e/2c191/lifecycle.png 259w\", \"/static/28589c0053b1c16dd40d62016802ac5e/86b01/lifecycle.png 518w\", \"/static/28589c0053b1c16dd40d62016802ac5e/0dc48/lifecycle.png 1035w\", \"/static/28589c0053b1c16dd40d62016802ac5e/511b8/lifecycle.png 1117w\"],\n \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \"), \"\\n \", mdx(\"figcaption\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-figcaption\"\n }, \"React \\u751F\\u547D\\u5468\\u671F\"), \"\\n \")), mdx(\"p\", null, \"\\u5206\\u6E05\\u54EA\\u4E9B\\u662F\\u72B6\\u6001\\u53D8\\u66F4\\u3001\\u54EA\\u4E9B\\u662F\\u526F\\u4F5C\\u7528\\u3001\\u54EA\\u4E9B\\u662F\\u4E0D\\u5FC5\\u8981\\u7684\\u8BA1\\u7B97\\u3002\\u751F\\u547D\\u5468\\u671F\\u5728\\u7EC4\\u4EF6\\u7684\\u6302\\u8F7D\\u3001\\u66F4\\u65B0\\u548C\\u9500\\u6BC1\\u65F6\\u90FD\\u4F1A\\u6267\\u884C\\u5BF9\\u5E94\\u7684\\u94A9\\u5B50\\u51FD\\u6570\\uFF0C\\u6240\\u4EE5\\u533A\\u5206\\u5177\\u4F53\\u7684\\u751F\\u547D\\u5468\\u671F\\uFF0C\\u5F04\\u6E05\\u526F\\u4F5C\\u7528\\uFF0C\\u7136\\u540E\\u7F13\\u5B58\\u8017\\u65F6\\u7684\\u8BA1\\u7B97\\uFF0C\\u5728\\u5408\\u9002\\u7684\\u751F\\u547D\\u5468\\u671F\\u4E2D\\u505A\\u6B63\\u786E\\u7684\\u4E8B\\u60C5\\u3002\"), mdx(\"h3\", null, \"8. \\u7406\\u89E3 Fiber \\u548C Scheduler \\u7684\\u8BA1\\u7B97\\u8C03\\u5EA6\"), mdx(\"p\", null, \"\\u5728\\u5B8C\\u5584\\u4E86\\u4E0D\\u5FC5\\u8981\\u7684\\u8BA1\\u7B97\\u548C\\u7F13\\u5B58\\u4E4B\\u540E\\uFF0C\", mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\u8003\\u8651\\u6574\\u4E2A\\u7528\\u6237\\u754C\\u9762\\u4EA4\\u4E92\\u7684\\u5168\\u5C40\\u8282\\u594F\\u6765\\u770B\\uFF0C\\u6027\\u80FD\\u95EE\\u9898\\u672C\\u8D28\\u4E0A\\u5176\\u5B9E\\u662F\\u8C03\\u5EA6\\u95EE\\u9898\\uFF0C\\u5982\\u4F55\\u8C03\\u5EA6 IO \\u548C CPU \\u4EFB\\u52A1\\uFF1F\"), \" \\u6BD4\\u5982\\u73B0\\u5728\\u60F3\\u8981\\u8BA1\\u7B97\\u6E32\\u67D3\\u591A\\u4E2A\\u7EC4\\u4EF6\\u3001\\u7F51\\u7EDC\\u6B63\\u5728\\u83B7\\u53D6\\u6570\\u636E\\u3001\\u7528\\u6237\\u6B63\\u5728\\u70B9\\u51FB\\u67D0\\u4E2A\\u6309\\u94AE\\u8FD9\\u4E9B\\u4EFB\\u52A1\\uFF0C\\u5982\\u679C\\u4E00\\u80A1\\u8111\\u7684\\u5168\\u585E\\u7ED9 Call Stack\\uFF0C\\u53EF\\u80FD\\u4F1A\\u51FA\\u73B0\\u7EC4\\u4EF6\\u6E32\\u67D3\\u5360\\u7528\\u592A\\u591A\\u65F6\\u95F4\\u6CA1\\u6709\\u76F8\\u5E94\\u7528\\u6237\\u70B9\\u51FB\\uFF0C\\u53EF\\u80FD\\u4F1A\\u51FA\\u73B0\\u6E32\\u67D3\\u5361\\u5728\\u4E86\\u7F51\\u7EDC\\u6570\\u636E\\u7684\\u7B49\\u5F85\\u4E0A\\u4E4B\\u7C7B\\u7684\\u5E7F\\u4E49\\u4E0A\\u7684\\u6027\\u80FD\\u95EE\\u9898\\u3002\"), mdx(\"p\", null, \"\\u8FD9\\u5757\\u53EF\\u80FD\\u5E76\\u4E0D\\u662F\\u7F16\\u7801\\u8FC7\\u7A0B\\u4E2D\\u9700\\u8981\\u6D89\\u53CA\\u5230\\u7684\\uFF0C\\u4F46\\u662F\\u5176\\u4E2D\\u7684\\u601D\\u60F3\\u8FD8\\u662F\\u5F88\\u503C\\u5F97\\u4E86\\u89E3\\u4E0B\\uFF0C\\u4ECE Fiber \\u548C Scheduler \\u80FD\\u770B\\u5230 React \\u5728\\u6574\\u4E2A\\u6E32\\u67D3\\u8FC7\\u7A0B\\u4E2D\\u7684\\u8BA1\\u7B97\\u4EFB\\u52A1\\u8C03\\u5EA6\\u3002React \\u9664\\u4E86\\u63D0\\u4F9B\\u4E86\\u4E00\\u5957\\u54CD\\u5E94\\u5F0F\\u7684\\u7F16\\u7A0B\\u4F53\\u9A8C\\u6846\\u67B6\\u80FD\\u529B\\uFF0C\\u8FD8\\u8003\\u8651\\u5230\\u4E86\\u5728\\u8FD9\\u4E2A\\u6846\\u67B6\\u4E0B\\u7684\\u91CD\\u5EA6\\u8BA1\\u7B97\\u4F18\\u5316\\u95EE\\u9898\\uFF0C\\u56E0\\u4E3A\\u4ECE\\u5C0F\\u5230\\u7EC4\\u4EF6\\uFF0C\\u5927\\u5230\\u5E94\\u7528\\u7684\\u5C3A\\u5EA6\\u4E0A\\uFF0C\\u518D\\u52A0\\u4E0A\\u7EC4\\u4EF6\\u7684\\u5C42\\u7EA7\\u5C01\\u88C5\\uFF0C\\u4EFB\\u4F55\\u7684\\u904D\\u5386\\u548C\\u9012\\u5F52\\u6E32\\u67D3\\u90FD\\u53EF\\u80FD\\u6D89\\u53CA\\u5230\\u4E0D\\u53EF\\u63A7\\u7684 CPU \\u6267\\u884C\\u65F6\\u957F\\u3002\"), mdx(\"p\", null, \"Fiber \\u662F\\u8BA9\\u7EC4\\u4EF6\\u7684\\u8BA1\\u7B97\\u5206\\u7247\\u5F0F\\u6267\\u884C\\uFF0C\\u76EE\\u7684\\u662F\\u907F\\u514D\\u7EC4\\u4EF6\\u6E32\\u67D3\\u8FC7\\u7A0B\\u4E2D\\u5360\\u7528\\u592A\\u957F\\u65F6\\u95F4\\u7684 CallStack\\uFF0C\\u5BFC\\u81F4\\u65E0\\u6CD5\\u54CD\\u5E94\\u7684\\u95EE\\u9898\\uFF0C\\u8BA9\\u6E32\\u67D3\\u4EFB\\u52A1\\u80FD\\u591F\\u6839\\u636E\\u8C03\\u5EA6\\uFF0C\\u80FD\\u591F\\u88AB\\u6253\\u65AD\\u7EC8\\u6B62\\uFF0C\\u5B9E\\u73B0\\u8BA1\\u7B97\\u8FC7\\u7A0B\\u4E2D\\u6743\\u5229\\u7684\\u63A7\\u5236\\uFF0C\\u53EF\\u4EE5\\u7406\\u89E3\\u4E3A React \\u63A5\\u7BA1\\u4E00\\u5B9A\\u65F6\\u95F4\\u540E\\u4E3B\\u52A8\\u5C06\\u8BA1\\u7B97\\u8C03\\u5EA6\\u6743\\u5229\\u4EA4\\u7ED9\\u6D4F\\u89C8\\u5668\\u54CD\\u5E94\\u7528\\u6237\\u64CD\\u4F5C\\u3002\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://juejin.im/post/5dadc6045188255a270a0f85\"\n }, \"React Fiber\")), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"\\u6240\\u4EE5 React \\u901A\\u8FC7 Fiber \\u67B6\\u6784\\uFF0C\\u8BA9\\u81EA\\u5DF1\\u7684 Reconcilation \\u8FC7\\u7A0B\\u53D8\\u6210\\u53EF\\u88AB\\u4E2D\\u65AD\\u3002'\\u9002\\u65F6' \\u5730\\u8BA9\\u51FA CPU \\u6267\\u884C\\u6743\\u53EF\\u4EE5\\u53CA\\u65F6\\u54CD\\u5E94\\u7528\\u6237\\u64CD\\u4F5C\\u3001\\u5EF6\\u65F6\\u64CD\\u4F5C DOM\\u3001\\u8BA9\\u6D4F\\u89C8\\u5668\\u7684\\u8FD0\\u884C\\u66F4\\u597D\\u7684\\u7F16\\u8BD1\\u4F18\\u5316\\u3002\")), mdx(\"p\", null, \"scheduler \\u7528\\u6765\\u505A\\u4EFB\\u52A1\\u8C03\\u5EA6\\uFF0C\\u5B9E\\u73B0 time slicing \\u6700\\u6838\\u5FC3\\u7684\\u529F\\u80FD\\uFF0C\\u8BA9 React \\u53EF\\u4EE5\\u968F\\u65F6\\u6682\\u505C\\u3001\\u6062\\u590D\\u67D0\\u4E00\\u4E2A\\u7EC4\\u4EF6\\u7684\\u6E32\\u67D3\\uFF0C\\u5B9E\\u73B0\\u6BD4\\u5982 Suspense \\u7B49\\u6E32\\u67D3\\u6682\\u505C\\u6548\\u679C\\u7684\\u529F\\u80FD\\u3002\"), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/blog/novus-2\"\n }, \"\\uD83D\\uDCE6 \\u6539\\u8FDB\\u4E00\\u4E2A\\u7B80\\u5355\\u6734\\u7D20\\u7684 react \\u6570\\u636E\\u7BA1\\u7406\\u5C42 NOVUS\"), \" \\u6587\\u7AE0\\u4E2D\\u56E0\\u4E3A\\u540C\\u6B65\\u6267\\u884C\\uFF0C\\u53EF\\u80FD\\u5BFC\\u81F4\\u7684\\u963B\\u585E\\uFF0C\\u5BF9\\u5E94\\u7684\\u5598\\u606F\\u673A\\u5236\\u662F\\u66F4\\u7B80\\u5355\\u7684\\u6A21\\u578B\\uFF0C\\u4E0E\\u4E4B\\u7C7B\\u4F3C\\u3002\")), mdx(\"h2\", null, \"\\u4E94\\u3001\\u5E38\\u89C1\\u6280\\u5DE7\"), mdx(\"p\", null, \"\\u4E0A\\u9762\\u7684\\u77E5\\u8BC6\\u91CC\\u9762\\u8BF4\\u4E86\\u5F88\\u591A\\uFF0C\\u8FD9\\u91CC\\u7B80\\u5355\\u5217\\u51FA\\u6765\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"React.PureComponent \\u907F\\u514D\\u4E0D\\u5FC5\\u8981\\u7684\\u91CD\\u65B0\\u6E32\\u67D3\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u5C06\\u53C2\\u6570\\u4F20\\u9012\\u548C\\u5185\\u90E8\\u72B6\\u6001\\u5C3D\\u53EF\\u80FD\\u62C6\\u5206\\u4E3A\\u57FA\\u7840\\u6570\\u636E\\u7C7B\\u578B\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"React.memo \\u7F13\\u5B58\\u51FD\\u6570\\u7EC4\\u4EF6\\uFF0Cmemoize \\u7F13\\u5B58\\u8BA1\\u7B97\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u8282\\u6D41\\uFF08throttling\\uFF09\\u548C\\u9632\\u6296\\uFF08debouncing\\uFF09\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u5728\\u590D\\u6742\\u7684\\u72B6\\u6001\\u548C\\u53C2\\u6570\\u7EC4\\u4EF6\\u4E2D\\u4F7F\\u7528 shouldComponentUpdate \\u62E6\\u622A\\u4E0D\\u5FC5\\u8981\\u7684\\u66F4\\u65B0\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u61D2\\u52A0\\u8F7D\\u3001\\u5305\\u62C6\\u5206\\u3001\\u516C\\u5171\\u4F9D\\u8D56\\u62C6\\u5206\\u7B49\\u624B\\u6BB5\\u63D0\\u5347\\u52A0\\u8F7D\\u6027\\u80FD\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u907F\\u514D\\u5728 props \\u4E2D\\u4F20\\u9012\\u5185\\u8054\\u533F\\u540D\\u51FD\\u6570\\uFF0C\\u4EE5\\u53CA\\u52A8\\u6001\\u83B7\\u53D6\\u6570\\u636E\\u903B\\u8F91\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u628A\\u8BF7\\u6C42\\u7B49\\u526F\\u4F5C\\u7528\\u90E8\\u5206\\u653E\\u5230 componentDidUpdate \\u548C componentDidMount \\u94A9\\u5B50\\u51FD\\u6570\\u4E2D\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u6700\\u597D\\u5728\\u6784\\u9020\\u51FD\\u6570\\u4E2D\\u7ED1\\u5B9A this\\uFF0C\\u4E0D\\u6D4E\\u4E5F\\u53EF\\u4EE5\\u4F7F\\u7528 \\u5C5E\\u6027\\u7B49\\u4E8E\\u7BAD\\u5934\\u51FD\\u6570\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u5217\\u8868\\u7EC4\\u4EF6\\u6DFB\\u52A0\\u552F\\u4E00 key\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u4E0D\\u53EF\\u53D8\\u6570\\u636E\\u7ED3\\u6784 immutable\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u4F7F\\u7528 SSR\")), mdx(\"h2\", null, \"\\u516D\\u3001\\u6700\\u540E\"), mdx(\"p\", null, \"\\u6027\\u80FD\\u7684\\u4F18\\u5316\\u5C31\\u662F\\u8981\\u51CF\\u5C11\\u4E0D\\u5FC5\\u8981\\u7684\\u52A0\\u8F7D\\u3001\\u8BA1\\u7B97\\u3001\\u6E32\\u67D3\\u7B49\\uFF0C\\u6240\\u4EE5\\u7F13\\u5B58\\u3001\\u5EF6\\u8FDF\\u3001\\u9884\\u52A0\\u8F7D\\u7B49\\u624B\\u6BB5\\u90FD\\u662F\\u4E00\\u6837\\u7684\\u5957\\u8DEF\\u3002\"));\n}\n;\nMDXContent.isMDXComponent = true;"},"next":{"fileAbsolutePath":"D:/ubug/storybook/content/blog/novus/novus.md","id":"0d56e544-58e4-592d-9f5f-8518cdeb0cfc","parent":{"name":"novus","sourceInstanceName":"blog"},"excerpt":"PS: 仓库和代码在最下面； PS 2 : 后续出现了一些问题和痛点，做了很多的改进： 📦 改进一个简单朴素的 react 数据管理层 NOVUS ，包括同步触发、初始化、自动依赖收集、“喘息机制”、Novus 版 Fiber 和测试，本篇重点说需求、基础功能和初步实现。 PS…","fields":{"title":"📦 实现一个简单朴素的 react 数据管理层 NOVUS","slug":"/blog/novus","description":"我喜欢的全局数据管理层只需要一个数据层，而不是各种范式、同步异步的需求，更不是没办法代码提示的各种 Action Type，尤其是没有 typescript 支持，不喜欢各种类型写好多次，不喜欢各种数据层概念，只想要实现一个简单朴素的数据管理工具","date":"2020-02-07","redirects":null,"datetime":"2020-02-07 22:50:20","categories":["code"],"series":null,"tags":["整理","思考","功能","NOVUS","状态管理"],"status":"online"},"frontmatter":{"published":null,"tags":["整理","思考","功能","NOVUS","状态管理"],"theme":null,"slug":"novus","date":"2020-02-07 22:50:20"},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n \"slug\": \"novus\",\n \"title\": \"📦 实现一个简单朴素的 react 数据管理层 NOVUS\",\n \"date\": \"2020-02-07 22:50:20\",\n \"author\": \"Ubug\",\n \"description\": \"我喜欢的全局数据管理层只需要一个数据层，而不是各种范式、同步异步的需求，更不是没办法代码提示的各种 Action Type，尤其是没有 typescript 支持，不喜欢各种类型写好多次，不喜欢各种数据层概念，只想要实现一个简单朴素的数据管理工具\",\n \"categories\": [\"code\"],\n \"tags\": [\"整理\", \"思考\", \"功能\", \"NOVUS\", \"状态管理\"],\n \"banner\": \"../novus2/banner.png\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return mdx(\"div\", props);\n};\nconst CodeWithPreview = makeShortcode(\"CodeWithPreview\");\nconst SourceCodeLink = makeShortcode(\"SourceCodeLink\");\nconst layoutProps = {\n _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n let {\n components\n } = _ref,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"PS: \\u4ED3\\u5E93\\u548C\\u4EE3\\u7801\\u5728\\u6700\\u4E0B\\u9762\\uFF1B\")), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"PS\", mdx(\"sup\", null, \"2\"), \": \\u540E\\u7EED\\u51FA\\u73B0\\u4E86\\u4E00\\u4E9B\\u95EE\\u9898\\u548C\\u75DB\\u70B9\\uFF0C\\u505A\\u4E86\\u5F88\\u591A\\u7684\\u6539\\u8FDB\\uFF1A \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/blog/novus-2\"\n }, \"\\uD83D\\uDCE6 \\u6539\\u8FDB\\u4E00\\u4E2A\\u7B80\\u5355\\u6734\\u7D20\\u7684 react \\u6570\\u636E\\u7BA1\\u7406\\u5C42 NOVUS\"), \"\\uFF0C\\u5305\\u62EC\\u540C\\u6B65\\u89E6\\u53D1\\u3001\\u521D\\u59CB\\u5316\\u3001\\u81EA\\u52A8\\u4F9D\\u8D56\\u6536\\u96C6\\u3001\\u201C\\u5598\\u606F\\u673A\\u5236\\u201D\\u3001Novus \\u7248 Fiber \\u548C\\u6D4B\\u8BD5\\uFF0C\\u672C\\u7BC7\\u91CD\\u70B9\\u8BF4\\u9700\\u6C42\\u3001\\u57FA\\u7840\\u529F\\u80FD\\u548C\\u521D\\u6B65\\u5B9E\\u73B0\\u3002\")), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, mdx(\"strong\", {\n parentName: \"p\"\n }, \"PS\", mdx(\"sup\", null, \"3\"), \": \\u524D\\u7AEF\\u9879\\u76EE\\u4E2D\\u7684\\u6570\\u636E\\u5C42\\u88AB\\u9020\\u8F6E\\u5B50\\u65E0\\u6570\\uFF0C\\u6709\\u5F88\\u591A\\u4F18\\u79C0\\u7684\\u5E93\\uFF0C\\u5927\\u5382\\u66F4\\u4E0D\\u7528\\u8BF4\\u5185\\u90E8\\u6210\\u719F\\u7684\\u89E3\\u51B3\\u65B9\\u6848\\u3002\\u8FD9\\u53EA\\u662F\\u6211\\u5728\\u9879\\u76EE\\u4E2D\\u5B9E\\u8DF5\\u7684\\u4E00\\u4E2A\\u89E3\\u51B3\\u65B9\\u6848\\uFF0C\\u4EC5\\u4F9B\\u53C2\\u8003\\u3002\"))), mdx(\"div\", {\n \"style\": {\n \"display\": \"flex\",\n \"justifyContent\": \"center\"\n }\n }, \"\\n \", mdx(\"figure\", {\n parentName: \"div\",\n \"className\": \"gatsby-resp-image-figure\"\n }, \"\\n \", mdx(\"img\", {\n parentName: \"figure\",\n \"src\": \"/chart-b85fa209b241651240201c1e1cdbcfed.svg\"\n }), \"\\n \", mdx(\"figcaption\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-figcaption\"\n }, \"novus \\u5355\\u5411\\u6570\\u636E\\u6D41\"), \"\\n \")), mdx(\"h2\", null, \"\\u4E00\\u3001\\u4E3A\\u4EC0\\u4E48\"), mdx(\"p\", null, \"\\u5728\\u73B0\\u4EE3\\u524D\\u7AEF\\u5F00\\u53D1\\u4E2D\\uFF0C\\u7EC4\\u4EF6\\u5316\\u3001\\u6A21\\u5757\\u5316\\u7684\\u5F15\\u5165\\uFF0C\\u72B6\\u6001\\u4E0E\\u754C\\u9762\\u7684\\u5206\\u79BB\\uFF0C\\u5BFC\\u81F4\\u72B6\\u6001\\u6570\\u636E\\u7684\\u5171\\u4EAB\\u548C\\u6D41\\u8F6C\\u90E8\\u5206\\u53D8\\u5F97\\u5F88\\u91CD\\u8981\\uFF0C\\u7A0D\\u5FAE\\u590D\\u6742\\u70B9\\u7684\\u9879\\u76EE\\u90FD\\u9700\\u8981\\u62BD\\u8C61\\u51FA\\u4E00\\u4E2A\\u6570\\u636E\\u5C42\\u6765\\u8D1F\\u8D23\\u6570\\u636E\\u7684\\u7BA1\\u7406\\u3001\\u53D8\\u66F4\\u548C\\u5206\\u53D1\\u3002\"), mdx(\"p\", null, \"\\u6211\\u5728 \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/talks\"\n }, \"talks\"), \" \\u680F\\u76EE\\u4E2D\\u4E5F\\u7B80\\u5355\\u8BF4\\u8FC7\\uFF1A \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/talks/#%F0%9F%9B%85%20%E6%95%B0%E6%8D%AE%E5%B1%82\"\n }, \"\\u6570\\u636E\\u5C42\")), mdx(\"p\", null, \"\\u5C24\\u5176\\u662F React\\u3001Vue \\u8FD9\\u7C7B\\u7EC4\\u4EF6\\u5316\\u5F00\\u53D1\\u6846\\u67B6\\uFF0C\\u6570\\u636E\\u9A71\\u52A8\\u7684\\u601D\\u60F3\\u662F\\u57FA\\u56E0\\u91CC\\u5E26\\u7684\\uFF0C\\u4F46\\u662F\\u81EA\\u5E26\\u7684\\u90FD\\u662F\\u7EC4\\u4EF6\\u5185\\u90E8\\u548C\\u4E4B\\u95F4\\u7684\\u72B6\\u6001\\u6D41\\u8F6C\\uFF0C\\u5982\\u679C\\u9700\\u8981\\u5168\\u5C40\\u7684\\u72B6\\u6001\\u3001\\u8DE8\\u7EC4\\u4EF6\\u7684\\u53D8\\u66F4\\u3001\\u591A\\u5C42\\u7EA7\\u7684\\u72B6\\u6001\\u5171\\u4EAB\\uFF0C\\u8FD8\\u662F\\u9700\\u8981\\u989D\\u5916\\u7684\\u72B6\\u6001\\u7BA1\\u7406\\uFF0CReact \\u5E76\\u6CA1\\u6709\\u5728\\u8FD9\\u4E2A\\u5730\\u65B9\\u63D0\\u4F9B\\u5F00\\u7BB1\\u5373\\u7528\\u7684\\u5185\\u7F6E\\u65B9\\u6848\\u3002\"), mdx(\"p\", null, \"\\u6211\\u4EEC\\u63A5\\u89E6\\u7684\\u6982\\u5FF5\\u6BD4\\u8F83\\u591A\\u7684\\u6709 \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://redux.js.org/\"\n }, \"Redux\"), \"\\uFF0C\", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://facebook.github.io/flux/\"\n }, \"Flux\"), \" \\u7684\\u6982\\u5FF5\\u5728\\u524D\\u7AEF\\u5F00\\u53D1\\u7684\\u6F14\\u8FDB\\u4E2D\\u5360\\u636E\\u7740\\u5F88\\u91CD\\u8981\\u7684\\u4E00\\u4E2A\\u4F4D\\u7F6E\\uFF0C\\u53E6\\u5916\\u8FD8\\u6709 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"MobX\"), \"\\uFF0C\\u7528\\u4E0D\\u540C\\u7684\\u601D\\u8DEF\\u6765\\u5904\\u7406\\u6570\\u636E\\u548C\\u53D8\\u66F4\\u3002\"), mdx(\"p\", null, \"\\u8FD9\\u7C7B\\u5168\\u5C40\\u72B6\\u6001\\u7BA1\\u7406\\u7684\\u7406\\u5FF5\\u80FD\\u591F\\u5C06\\u5F88\\u590D\\u6742\\u7684\\u5E94\\u7528\\u67B6\\u6784\\u62C6\\u5206\\uFF0C\\u5728\\u524D\\u9762 \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/blog/workpad-part-2\"\n }, \"\\uD83C\\uDF0B WebIDE \\u7684\\u5F00\\u53D1\\u8BB0\\u5F55\\u5176\\u4E8C\\uFF08\\u6838\\u5FC3\\u67B6\\u6784\\uFF09\"), \" \\u6587\\u7AE0\\u4E2D\\u4E5F\\u8BF4\\u4E86\\u8FD9\\u4E2A\\u4E8B\\u60C5\\uFF0C\\u76F8\\u6BD4\\u4E4B\\u524D\\u7684\\u72B6\\u6001\\u7BA1\\u7406\\u5206\\u6563\\u7684\\u6982\\u5FF5\\uFF0C\\u5C06\\u6570\\u636E\\u7684\\u6D41\\u8F6C\\u62C6\\u5206\\u4E3A\\u5168\\u5C40\\u7684\\uFF1A\\u89E6\\u53D1\\u52A8\\u4F5C\\u3001\\u4FEE\\u6539\\u6570\\u636E\\u3001\\u53D8\\u66F4\\u901A\\u77E5\\u3002\\u8FD9\\u6837\\u7684\\u72EC\\u7ACB\\u7684\\u6570\\u636E\\u7BA1\\u7406\\u5C42\\u63A7\\u5236\\u7684\\u5355\\u5411\\u6570\\u636E\\u6D41\\u8F6C\\uFF0C\\u4FDD\\u8BC1\\u6BCF\\u4E2A\\u8282\\u70B9\\u90FD\\u662F\\u63A5\\u53D7\\u6570\\u636E\\u66F4\\u65B0\\uFF0C\\u800C\\u4E0D\\u662F\\u4E00\\u7EA7\\u4E00\\u7EA7\\u4F20\\u9012\\uFF0C\\u6216\\u8005\\u56DE\\u8C03\\u51FD\\u6570\\u7B49\\uFF0C\\u8BA9\\u52A8\\u4F5C\\u3001\\u6570\\u636E\\u548C\\u754C\\u9762\\u62C6\\u5206\\uFF0C\\u65B9\\u4FBF\\u66F4\\u5927\\u578B\\u7684\\u67B6\\u6784\\u6269\\u5C55\\uFF0C\\u800C\\u4E0D\\u7528\\u64CD\\u5FC3\\u6570\\u636E\\u4ECE\\u54EA\\u6765\\u3001\\u600E\\u4E48\\u53D8\\u66F4\\u3001\\u600E\\u4E48\\u91CD\\u7ED8\\u7EC4\\u4EF6\\u7684\\u95EE\\u9898\\u3002\"), mdx(\"p\", null, mdx(\"figure\", {\n parentName: \"p\",\n \"className\": \"gatsby-resp-image-figure\",\n \"style\": {}\n }, \"\\n \", mdx(\"span\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-wrapper\",\n \"style\": {\n \"position\": \"relative\",\n \"display\": \"block\",\n \"marginLeft\": \"auto\",\n \"marginRight\": \"auto\",\n \"maxWidth\": \"1035px\"\n }\n }, \"\\n \", mdx(\"a\", {\n parentName: \"span\",\n \"className\": \"gatsby-resp-image-link\",\n \"href\": \"/static/c77b157f4707d4711f7368e8590ee1e9/8b6a1/redux-architecture.png\",\n \"style\": {\n \"display\": \"block\"\n },\n \"target\": \"_blank\",\n \"rel\": [\"noopener\"]\n }, \"\\n \", mdx(\"span\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-background-image\",\n \"style\": {\n \"paddingBottom\": \"29.72972972972973%\",\n \"position\": \"relative\",\n \"bottom\": \"0\",\n \"left\": \"0\",\n \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAAAsSAAALEgHS3X78AAABi0lEQVQY02N4uvk0w4MNJ5guz17HUDD9MMP6s/+ZJmx5x3hgYgzD/4frmf4/WMr4cN0Fhhv7TjIzAMGRI0fjT5w4MWvfvv2SIP72U6+Y582aw/D/3jLG/082MDKQCg4e2huxd9+uGSfPHhbGqmDXxKWOuyYtO7G9fbpLzpQ9JpNWXT5XP/+8/76uQK1723qP39/W4re1Z3nsnknLDs2vn2jS27yxflLb5o19jYucO5ecrutbeX1rb89kvftbOlbf3dLdwXBg2mq1HROW1O7pma2ZNe+b8MSVH2Jq5n9XuLciVfzu1t6qB9tb9Xf0rzbZOWFxyarWWZKLZx4OWjX3ZEES42bepnkvjaZtepi+YP4K0QdbO5LvbO72R3Ht3B3tJqtPT146f3eHJw4fM4HJVAaWFSdnLVl+dGIpVBwRdv+OPWRsLa3gALEnrG7XXbB32oQp67vtQfz+pjSOX2enMh6ZsY2xK6eK1cnBhoWBgZexZ16n6MJ9U+vn7Z6SCFIXHBvAMqEskhXoZSYAl5e3zvqcLJoAAAAASUVORK5CYII=')\",\n \"backgroundSize\": \"cover\",\n \"display\": \"block\"\n }\n }), \"\\n \", mdx(\"img\", {\n parentName: \"a\",\n \"className\": \"gatsby-resp-image-image\",\n \"alt\": \"redux 的数据流转\",\n \"title\": \"redux 的数据流转\",\n \"src\": \"/static/c77b157f4707d4711f7368e8590ee1e9/0dc48/redux-architecture.png\",\n \"srcSet\": [\"/static/c77b157f4707d4711f7368e8590ee1e9/2c191/redux-architecture.png 259w\", \"/static/c77b157f4707d4711f7368e8590ee1e9/86b01/redux-architecture.png 518w\", \"/static/c77b157f4707d4711f7368e8590ee1e9/0dc48/redux-architecture.png 1035w\", \"/static/c77b157f4707d4711f7368e8590ee1e9/8b6a1/redux-architecture.png 1319w\"],\n \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n \"style\": {\n \"width\": \"100%\",\n \"height\": \"100%\",\n \"margin\": \"0\",\n \"verticalAlign\": \"middle\",\n \"position\": \"absolute\",\n \"top\": \"0\",\n \"left\": \"0\"\n },\n \"loading\": \"lazy\"\n }), \"\\n \"), \"\\n \"), \"\\n \", mdx(\"figcaption\", {\n parentName: \"figure\",\n \"className\": \"gatsby-resp-image-figcaption\"\n }, \"redux \\u7684\\u6570\\u636E\\u6D41\\u8F6C\"), \"\\n \")), mdx(\"p\", null, \"\\u8FD9\\u79CD\\u6570\\u636E\\u7684\\u7BA1\\u7406\\u6A21\\u5F0F\\u5728\\u5927\\u578B\\u9879\\u76EE\\u4E2D\\u975E\\u5E38\\u6709\\u6548\\uFF0C\\u53CD\\u6B63\\u6211\\u76EE\\u524D\\u5728\\u8F83\\u5927\\u578B\\u7684\\u9879\\u76EE\\u4E2D\\u90FD\\u9700\\u8981\\u4E00\\u4E2A\\u6570\\u636E\\u5C42\\u7684\\u4E1C\\u897F\\u6765\\u7BA1\\u7406\\u6570\\u636E\\u7684\\u9A71\\u52A8\\u3001\\u53D8\\u66F4\\u548C\\u5206\\u53D1\\u3002\"), mdx(\"p\", null, \"\\u7136\\u540E\\u7D22\\u6027\\u4E00\\u60F3\\uFF0C\\u4E0D\\u5982\\u6211\\u4E5F\\u6765\\u9020\\u4E2A\\u8F6E\\u5B50\\uFF0C\\u4E00\\u65B9\\u9762\\u6EE1\\u8DB3\\u8FD9\\u4E2A\\u9879\\u76EE\\u6700\\u540E\\u4E00\\u5757\\u4F18\\u96C5\\u7684\\u62FC\\u56FE\\uFF0C\\u53E6\\u4E00\\u65B9\\u9762\\u8FD9\\u5757\\u786E\\u5B9E\\u6709\\u4E9B\\u60F3\\u6CD5\\uFF0C\\u4E5F\\u662F\\u65F6\\u5019\\u5C06\\u8FD9\\u4E9B\\u60F3\\u6CD5\\u53D8\\u6210\\u4EA7\\u51FA\\u4E86\\u3002\"), mdx(\"h2\", null, \"\\u4E8C\\u3001Redux \\u975E\\u5E38\\u4F18\\u79C0\\uFF0C\\u4F46\\u662F...\"), mdx(\"p\", null, \"redux \\u5728\\u524D\\u7AEF\\u5F00\\u53D1\\u4E2D\\u975E\\u5E38\\u6709\\u6548\\uFF0C\\u800C\\u4E14 react\\u3001redux\\u3001react-redux \\u5168\\u5BB6\\u6876\\u4E5F\\u5F88\\u597D\\u7528\\uFF0C\\u4E00\\u822C\\u7684\\u516C\\u53F8\\u90FD\\u4F1A\\u4F7F\\u7528\\u8FD9\\u4E2A\\u5DE5\\u5177\\u6765\\u7BA1\\u7406\\u524D\\u7AEF\\u7684\\u6570\\u636E\\u4E2D\\u5FC3\\u3002\\u8FD9\\u91CC\\u4E5F\\u8F6E\\u4E0D\\u5230\\u6211\\u6765\\u5BF9\\u8FD9\\u4E2A\\u4F18\\u79C0\\u7684\\u5DE5\\u5177\\u8BC4\\u5934\\u54C1\\u8DB3\\u7684\\uFF0C\\u771F\\u7684\\u975E\\u5E38\\u4F18\\u79C0\\u3002\"), mdx(\"p\", null, \"\\u4F46\\u662F\\u4F18\\u79C0\\u7684\\u610F\\u601D\\u5E76\\u4E0D\\u662F\\u9002\\u5408\\u6BCF\\u4E00\\u4E2A\\u4EBA\\u548C\\u6BCF\\u4E00\\u4E2A\\u9879\\u76EE\\uFF0C\\u5F88\\u591A\\u5410\\u69FD\\u548C\\u8BA8\\u8BBA\\u4E5F\\u5145\\u65A5\\u5404\\u5927\\u793E\\u533A\\uFF0C\\u6BD4\\u5982\\u6BD4\\u8F83\\u591A\\u7684\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u6982\\u5FF5\\u592A\\u591A\")), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u52A0\\u4E0A\\u526F\\u4F5C\\u7528\\u548C\\u80F6\\u6C34\\u4E2D\\u95F4\\u4EF6\\u5904\\u7406\\u5C31\\u4F1A\\u6709 store\\u3001states\\u3001action\\u3001reducer\\u3001dispatch\\u3001payload\\u3001immutable\\u3001take\\u3001put\\u3001call\\u3001connect\\u3001mapStateToProps\\u3001mapDispatchToProps \\u8FD9\\u4E9B\\u6982\\u5FF5\\u95E8\\u69DB\\u4F1A\\u6709\\u529D\\u9000\\u6548\\u5E94\\uFF0C\\u60F3\\u5165\\u95E8\\u5FC5\\u987B\\u82B1\\u65F6\\u95F4\\u5B66\\u4E60\\u548C\\u5B9E\\u8DF5\\uFF0C\\u867D\\u7136\\u5728\\u6570\\u636E\\u7BA1\\u7406\\u4E2D\\u53EA\\u8981\\u6DF1\\u5165\\u62BD\\u8C61\\uFF0C\\u8FD9\\u4E9B\\u90FD\\u4F1A\\u6D89\\u53CA\\uFF0C\\u4F46\\u662F\\u6BCF\\u4E2A\\u9879\\u76EE\\u6216\\u8005\\u65B0\\u4EBA\\u90FD\\u4F1A\\u6709\\u5F88\\u591A\\u7684\\u5B66\\u4E60\\u548C\\u9002\\u5E94\\u6210\\u672C\\u3002\")), mdx(\"ol\", {\n \"start\": 2\n }, mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u6A21\\u5F0F\\u4EE3\\u7801\")), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u6D01\\u7656\\u7684\\u5F00\\u53D1\\u5F62\\u5F0F\\uFF0C\\u6BCF\\u4E2A\\u72B6\\u6001\\u7684\\u7BA1\\u7406\\u90FD\\u8981\\u62C6\\u5206\\u5230\\u4E0D\\u540C\\u7684\\u6587\\u4EF6\\u6216\\u8005\\u903B\\u8F91\\u4E2D\\uFF0C\\u51FD\\u6570\\u5F0F\\u3001\\u4E0D\\u53EF\\u53D8\\u6027\\u7684\\u4EE3\\u4EF7\\u662F\\u7E41\\u7410\\u7684\\u6A21\\u5F0F\\u4EE3\\u7801\\uFF0C\\u72B6\\u6001\\u5C0F\\u6539\\u4E00\\u4E0B\\u90FD\\u8981\\u6539\\u597D\\u51E0\\u4E2A\\u6587\\u4EF6\\uFF0C\\u4E5F\\u56E0\\u6B64\\u51E0\\u4E4E\\u5927\\u578B\\u9879\\u76EE\\u90FD\\u4F1A\\u5BF9\\u8FD9\\u5757\\u8FDB\\u884C\\u5C01\\u88C5\\uFF0C\\u56E0\\u4E3A\\u786E\\u5B9E\\u7EF4\\u62A4\\u8D77\\u6765\\u4F1A\\u5F88\\u56F0\\u96BE\\u3002\\u597D\\u5904\\u662F\\u903B\\u8F91\\u6E05\\u6670\\uFF0C\\u50CF\\u662F\\u673A\\u623F\\u7684\\u6570\\u636E\\u7EBF\\u6574\\u7406\\uFF0C\\u7ED5\\u4E86\\u5F88\\u591A\\u5708\\u4F46\\u662F\\u770B\\u8D77\\u6765\\u5F88\\u5E72\\u51C0\\u3002\")), mdx(\"ol\", {\n \"start\": 3\n }, mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u903B\\u8F91\\u62C6\\u5206\")), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u7F16\\u7A0B\\u5F88\\u591A\\u4EBA\\u66F4\\u559C\\u6B22\\u7684\\u662F\\u76F8\\u4F3C\\u7684\\u903B\\u8F91\\u4F1A\\u653E\\u5230\\u4E00\\u8D77\\u805A\\u5408\\uFF0C\\u800C\\u4E0D\\u662F\\u6309\\u7167\\u6D41\\u7A0B\\u6216\\u8005\\u529F\\u80FD\\u62C6\\u5206\\uFF0C\\u6BD4\\u5982\\u5B66\\u751F\\u4FE1\\u606F\\u76F4\\u89C9\\u5E94\\u8BE5\\u653E\\u5230\\u4E00\\u4E2A\\u62BD\\u8C61\\u4E2D\\uFF0C\\u800C\\u4E0D\\u662F\\u67E5\\u8BE2\\u548C\\u66F4\\u6539\\u5206\\u5F00\\u3002\\u903B\\u8F91\\u4E0A\\u7684\\u62BD\\u8C61\\u6BCF\\u4E2A\\u56E2\\u961F\\u504F\\u597D\\u4E0D\\u540C\\uFF0C\\u8FD9\\u91CC\\u5E94\\u8BE5\\u6709\\u4E0D\\u540C\\u7684\\u5B9E\\u8DF5\\u3002\")), mdx(\"p\", null, \"\\u5F53\\u7136\\u9700\\u6C42\\u7684\\u53D6\\u820D\\u662F\\u4E00\\u95E8\\u827A\\u672F\\uFF0C\\u4E0D\\u53EF\\u80FD\\u6709\\u4E00\\u4E2A\\u7248\\u672C\\u80FD\\u6EE1\\u8DB3\\u6BCF\\u4E00\\u4E2A\\u9879\\u76EE\\u9700\\u6C42\\uFF0C\\u7532\\u4E4B\\u871C\\u7CD6\\uFF0C\\u4E59\\u4E4B\\u7812\\u971C\\u4E5F\\u662F\\u5F88\\u81EA\\u7136\\u7684\\u4E8B\\u60C5\\u3002\\u6BD4\\u5982\\u4E0A\\u9762\\u7684\\u4E0D\\u65B9\\u4FBF\\u7684\\u8FD9\\u79CD\\u8303\\u5F0F\\uFF0C\\u5BF9\\u4E8E\\u8C03\\u8BD5\\u3001\\u5BF9\\u4E8E\\u6570\\u636E\\u7684\\u540C\\u6B65\\u548C\\u7BA1\\u7406\\u3001\\u5BF9\\u4E8E\\u670D\\u52A1\\u7AEF\\u6E32\\u67D3\\u3001\\u5BF9\\u4E8E\\u6D4B\\u8BD5\\u3001\\u5BF9\\u4E8E\\u9879\\u76EE\\u6570\\u636E\\u521D\\u59CB\\u5316\\u7B49\\u5374\\u662F\\u76F8\\u5BF9\\u4F18\\u96C5\\u7684\\u5B9E\\u73B0\\u3002\"), mdx(\"p\", null, \"Mobx \\u4F7F\\u7528\\u88C5\\u9970\\u5668\\u7684\\u8BED\\u6CD5\\u5B9E\\u73B0\\u4E86\\u66F4\\u52A0\\u6E05\\u723D\\u7684\\u529F\\u80FD\\uFF0C\\u4E5F\\u662F\\u5F88\\u591A\\u4EBA\\u63A8\\u5D07\\u7684\\u4E00\\u4E2A\\u65B9\\u6848\\uFF0C\\u6211\\u4E5F\\u5F88\\u611F\\u5174\\u8DA3\\uFF0C\\u4E0D\\u8FC7\\u6211\\u53EF\\u80FD\\u5BF9\\u88C5\\u9970\\u5668\\u4E0D\\u592A\\u611F\\u5192\\uFF0C\\u800C\\u4E14\\u4E5F\\u6CA1\\u548B\\u7528\\u8FC7\\u3002\"), mdx(\"p\", null, \"\\u5F53\\u7136 redux \\u6216\\u8005 mobx \\u4E5F\\u5E76\\u6CA1\\u6709\\u4E00\\u4E2A\\u5B98\\u65B9\\u7684\\u5F00\\u53D1\\u6A21\\u5F0F\\uFF0C\\u66F4\\u591A\\u7684\\u662F\\u4E00\\u79CD\\u7406\\u5FF5\\uFF0C\\u6BCF\\u4E2A\\u4EBA\\u90FD\\u53EF\\u4EE5\\u6839\\u636E\\u8FD9\\u4E2A\\u7406\\u5FF5\\u5B9E\\u73B0\\u81EA\\u5DF1\\u7684\\u5DE5\\u5177\\uFF0C\\u5F53\\u7136\\u4E5F\\u5305\\u62EC\\u6211~~\"), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"\\u6280\\u672F\\u53D1\\u5C55\\u5230\\u73B0\\u5728\\u66F4\\u662F\\u767E\\u82B1\\u9F50\\u653E\\uFF0C\\u5F88\\u65E9\\u4E4B\\u524D\\u8FD9\\u4E9B\\u8BA8\\u8BBA\\u5C31\\u6709\\u5F88\\u591A\\uFF1A\\n\\u963F\\u91CC\\u65E9\\u671F\\u7684\\u8BA8\\u8BBA\\uFF1A\", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/sorrycc/blog/issues/5\"\n }, \"MobX \\u548C Redux \\u7684\\u6BD4\\u8F83\"), \"\\n\\u5BF9 antd \\u6846\\u67B6\\u91CC\\u7684\\u5410\\u69FD\\uFF1A\", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://github.com/ant-design/ant-design-pro/issues/1516\"\n }, \"\\u5FCD\\u4E0D\\u4F4F\\u5410\\u69FD\\u4E00\\u4E0BFlux\\u548CRedux\"))), mdx(\"h2\", null, \"\\u4E09\\u3001\\u76EE\\u6807\\u548C\\u53D6\\u820D\"), mdx(\"p\", null, \"\\u5F53\\u65F6\\u90A3\\u4E2A\\u9879\\u76EE\\u5F00\\u53D1\\u7684\\u65F6\\u5019\\u76F4\\u63A5\\u7528\\u4E86\\u5C01\\u88C5\\u6BD4\\u8F83\\u597D\\u7684 \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://dvajs.com/guide/\"\n }, \"DvaJS\"), \" \\u6765\\u505A\\u5F00\\u53D1\\uFF0C\\u5F88\\u591A\\u65B9\\u9762\\u5DF2\\u7ECF\\u6539\\u5584\\u4E86\\u5F00\\u53D1\\u4F53\\u9A8C\\uFF0C\\u53EF\\u80FD\\u81EA\\u5DF1\\u7528\\u7684\\u662F\\u6BD4\\u8F83\\u65E9\\u671F\\u7684\\u7248\\u672C\\uFF0C\\u6CA1\\u6709 TS \\u652F\\u6301\\uFF0C\\u4EC5\\u8003\\u8651 DvaJS \\u6709\\u4E00\\u4E9B\\u4E0D\\u987A\\u624B\\u7684\\u5730\\u65B9\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"react-router\"), \" \\u548C \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"fetch\"), \" \\u7684\\u5185\\u7F6E\\u5E76\\u4E0D\\u9700\\u8981\"), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"redux\"), \" \\u548C \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"redux-saga\"), \" \\u5F88\\u591A\\u6982\\u5FF5\\u7279\\u6027\\uFF0C\", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"put\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"call\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"payload\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"action\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"dispatch\"), \" \\u7B49\\u903B\\u8F91\\u4E00\\u4E2A\\u6CA1\\u5C11\\uFF0C\\u800C\\u4E14\\u6CA1\\u529E\\u6CD5\\u63A8\\u65AD\\uFF1B\"), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"action type\"), \" \\u5B57\\u7B26\\u4E32\\u6216\\u8005\\u5E38\\u91CF\\u7C7B\\u578B\\uFF0C\\u6CA1\\u529E\\u6CD5\\u4EE3\\u7801\\u63D0\\u793A\\uFF0C\\u6CA1\\u529E\\u6CD5\\u63A8\\u65AD\\uFF1B\"), mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"payload\"), \" \\u4F5C\\u4E3A\\u53C2\\u6570\\uFF0C\\u6CA1\\u529E\\u6CD5\\u4EE3\\u7801\\u63D0\\u793A\\uFF0C\\u6CA1\\u529E\\u6CD5\\u63A8\\u65AD\\uFF1B\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u7EE7\\u627F\\u81EA \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"redux-saga\"), \" \\u7684 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Generator\"), \" \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Iterator\"), \" \\u7684 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"effects\"), \"\\uFF0C\\u7528\\u5230 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"yield *\"), \" \\u5F02\\u6B65\\u5904\\u7406\\u65B9\\u5F0F\\u3002\\u4E0D\\u4E60\\u60EF\\u3001\\u4E0D\\u559C\\u6B22\\uFF1B\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u8FD8\\u60F3\\u8981\\u4E00\\u6B21\\u6570\\u636E\\u7ED3\\u6784\\u5B9A\\u4E49\\u5173\\u8054\\u7684\\u5730\\u65B9\\u90FD\\u80FD\\u7ACB\\u523B\\u53CD\\u6620\\u51FA\\u6765\\u800C\\u4E0D\\u662F\\u8FD0\\u884C\\u65F6\\u8FDE\\u63A5\\u3002\")), mdx(\"p\", null, \"\\u56E0\\u4E3A\\u8FD9\\u4E9B\\u539F\\u56E0\\uFF0C\\u5728\\u540E\\u671F\\u5168\\u9762\\u8F6C\\u5411 \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"TypeScript\"), \" \\u65F6\\uFF0C\\u4E00\\u76F4\\u60F3\\u628A\\u8FD9\\u5757\\u66FF\\u6362\\u6389\\u3002\"), mdx(\"p\", null, \"\\u6570\\u636E\\u5C42\\u7684\\u9700\\u6C42\\u4E00\\u822C\\u4E5F\\u5F88\\u7B80\\u5355\\uFF0C\\u8FD8\\u662F\\u7C7B\\u4F3C \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"dva\"), \" \\u96C6\\u4E2D\\u7EC4\\u7EC7\\u6570\\u636E\\u7684\\u65B9\\u5F0F\\uFF0C\\u4F46\\u662F\\u4E0D\\u4F7F\\u7528 redux \\u5B57\\u7B26\\u4E32\\u6A21\\u677F\\u7684\\u5F62\\u5F0F\\u3002\\u5C31\\u662F\\u80FD\\u50A8\\u5B58\\u3001\\u80FD\\u6539\\u53D8\\u3001\\u80FD\\u54CD\\u5E94\\u57FA\\u672C\\u4E0A\\u5C31\\u53EF\\u4EE5\\u4E86\\uFF0C\\u751A\\u81F3\\u53EF\\u4EE5\\u7B80\\u5355\\u7406\\u89E3\\u4E3A\\u4E00\\u4E2A\\u53D1\\u5E03\\u8BA2\\u9605\\u7CFB\\u7EDF\\u3002\\u6700\\u57FA\\u672C\\u7684\\u9700\\u6C42\\u6709\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Model\"), \" \\u6570\\u636E\\u6E90 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"state\"), \" \\u6309\\u7167\\u903B\\u8F91\\u96C6\\u4E2D\\u6570\\u636E\\uFF0C\\u80FD\\u5B9A\\u4E49 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"ts type\")), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u4E0D\\u8FFD\\u6C42\\u7EDD\\u5BF9\\u5E72\\u51C0\\u7684\\u65B9\\u6CD5\\u6539\\u53D8 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"state\"), \"\\uFF0C\\u4F46\\u662F\\u63D0\\u4F9B\\u65B9\\u4FBF\\u7684\\u4E60\\u60EF\\u7EA6\\u5B9A\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u4E0D\\u9700\\u8981 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"devtool\"), \" \\u7BA1\\u7406\\u5386\\u53F2\\uFF0C\\u6CA1\\u6709\\u65F6\\u95F4\\u6F2B\\u6E38\\u7684\\u9700\\u6C42\\uFF0C\\u4E5F\\u4E0D\\u523B\\u610F\\u5F3A\\u8C03\\u4FEE\\u6539\\u72B6\\u6001\\u903B\\u8F91\\u7684\\u5E72\\u51C0\\u3001\\u7B80\\u5355\\uFF0C\\u6240\\u4EE5\\u4E0D\\u7279\\u610F\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"reducer\"), \" \\u6982\\u5FF5\\uFF0C\\u907F\\u514D\\u8BED\\u6CD5\\u5570\\u55E6\\uFF08\\u4E0D\\u5F3A\\u8C03\\u534F\\u4F5C+\\u91CD\\u653E\\u7B49\\u573A\\u666F\\uFF09\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u4E0D\\u7279\\u610F\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"reducer\"), \"\\uFF0C\\u4F46\\u662F\\u4ECD\\u7136\\u53EF\\u4EE5\\u5C01\\u88C5 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"setState\"), \" \\u4E3A\\u7EAF\\u51FD\\u6570\\u7684\\u5904\\u7406\\u6765\\u5B9E\\u73B0 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"reducer\"), \" \\u76F8\\u4F3C\\u7684\\u529F\\u80FD\\uFF0C\\u8FD9\\u91CC\\u56E0\\u4E3A\\u5BF9\\u6570\\u636E\\u7684\\u6D41\\u8F6C\\u4E0D\\u523B\\u610F\\u5F3A\\u8C03\\uFF0C\\u6240\\u4EE5\\u4E0D\\u9884\\u8BBE\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u4E0D\\u7279\\u610F\\u5F3A\\u8C03\\u526F\\u4F5C\\u7528\\uFF0C\\u800C\\u5F3A\\u8C03 \", mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u72B6\\u6001\\u672C\\u8EAB\"), \" \\u548C \", mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u4FEE\\u6539\\u72B6\\u6001\\u7684\\u884C\\u4E3A\"), \"\\uFF0C\\u7EAF\\u51FD\\u6570\\u4F1A\\u66F4\\u597D\\uFF0C\\u4F46\\u662F\\u6211\\u5E0C\\u671B\\u8FD9\\u662F\\u53EF\\u9009\\u7684\\uFF0C\\u800C\\u4E0D\\u662F\\u7528\\u5F88\\u5947\\u602A\\u7684\\u4EE3\\u7801\\u7EC4\\u7EC7\\u6765\\u533A\\u5206\\u548C\\u9650\\u5236\\u3002\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u6539\\u52A8\\u80FD\\u8BA2\\u9605\\uFF0C\", mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u72B6\\u6001\\u672C\\u8EAB\"), \" + \", mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u4FEE\\u6539\\u72B6\\u6001\\u7684\\u884C\\u4E3A\"), \" + \", mdx(\"strong\", {\n parentName: \"li\"\n }, \"\\u72B6\\u6001\\u80FD\\u88AB\\u8BA2\\u9605\")), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u80FD\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"connect\"), \" \\u6216\\u8005 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"useHooks\"), \" \\u65B9\\u6CD5\\u4F7F\\u7528\\u548C\\u8BA2\\u9605\\u6570\\u636E\\u7684\\u53D8\\u5316\\u901A\\u77E5\\uFF0C\\u4ECE\\u800C\\u6E32\\u67D3\\u7EC4\\u4EF6\\u3002\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"\\u6700\\u5927\\u7684\\u9A71\\u52A8\\u662F\\u80FD\\u591F\\u7528 \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"ts\"), \" \\u7684\\u7C7B\\u578B\\u9650\\u5236\\u548C\\u63A8\\u65AD\\uFF0C\\u81EA\\u52A8\\u63D0\\u793A\\u6570\\u636E\\u7684\\u8BBF\\u95EE\\u548C \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"action\"), \" \\u7684\\u53C2\\u6570\\u548C\\u8FD4\\u56DE\\u3002\")), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"\\u4E0D\\u7279\\u610F\\u5F3A\\u8C03\\u526F\\u4F5C\\u7528\\uFF0C\\u800C\\u5F3A\\u8C03 \", mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\u72B6\\u6001\\u672C\\u8EAB\"), \"\\u3001\", mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\u4FEE\\u6539\\u72B6\\u6001\\u7684\\u884C\\u4E3A\"), \" \\u548C \", mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\u72B6\\u6001\\u80FD\\u88AB\\u8BA2\\u9605\"), \"\\uFF0C\\u6CA1\\u6709\\u526F\\u4F5C\\u7528\\u7684\\u7EAF\\u51FD\\u6570\\u4F1A\\u66F4\\u597D\\uFF0C\\u4F46\\u662F\\u6211\\u5E0C\\u671B\\u8FD9\\u662F\\u53EF\\u9009\\u7684\\uFF0C\\u800C\\u4E0D\\u662F\\u7528\\u5F88\\u5947\\u602A\\u7684\\u4EE3\\u7801\\u7EC4\\u7EC7\\u6765\\u533A\\u5206\\u548C\\u9650\\u5236\\u3002\")), mdx(\"h2\", null, \"\\u56DB\\u3001\\u5B9E\\u73B0\"), mdx(\"p\", null, \"\\u5B9E\\u73B0\\u7684\\u65F6\\u5019\\u751A\\u81F3\\u6CA1\\u6709\\u82B1\\u592A\\u591A\\u7CBE\\u529B\\uFF0C\\u4E5F\\u5F88\\u65B9\\u4FBF\\u7684\\u66FF\\u6362\\u6389\\u4E86\\u539F\\u6765\\u7684\\u6570\\u636E\\u7BA1\\u7406\\u5C42\\uFF0C\\u73B0\\u5728\\u7528\\u8D77\\u6765\\u611F\\u89C9\\u6E05\\u723D\\u5F88\\u591A\\uFF0C\\u4E5F\\u5B8C\\u5168\\u6EE1\\u8DB3\\u8F83\\u5927\\u9879\\u76EE\\u7684\\u4F7F\\u7528\\uFF0C\\u6BD4\\u5982 \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"/blog/workpad-part-1\"\n }, \"\\uD83C\\uDF0B WebIDE \\u7684\\u5F00\\u53D1\\u8BB0\\u5F55\\u5176\\u4E00\"), \"\\u3002\"), mdx(\"p\", null, \"\\u4F7F\\u7528 novus \\u4E4B\\u540E\\uFF0C\\u72B6\\u6001\\u7684\\u5F15\\u5165\\u3001\\u52A8\\u4F5C\\u7684\\u8C03\\u7528\\u90FD\\u6709\\u5B8C\\u6574\\u7684\\u4EE3\\u7801\\u63D0\\u793A\\uFF0C\\u800C\\u4E14\\u5F88\\u81EA\\u7136\\u7684\\u5C06 \", mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\u3010\\u6570\\u636E\\u72B6\\u6001\\u3011\"), \" \\u548C \", mdx(\"strong\", {\n parentName: \"p\"\n }, \"\\u3010\\u72B6\\u6001\\u7684\\u6539\\u53D8\\u884C\\u4E3A\\u3011\"), \" \\u533A\\u5206\\uFF0C\\u5F02\\u6B65\\u548C\\u540C\\u6B65\\u7684\\u5F3A\\u8C03\\u53D8\\u4E3A\\u65B9\\u6CD5\\u548C\\u8D4B\\u503C\\u3002\"), mdx(\"p\", null, \"\\u6838\\u5FC3\\u4EE3\\u7801\\u4E5F\\u5C31\\u51E0\\u5341\\u884C\\uFF0C\\u4E5F\\u53EF\\u4EE5\\u770B\\u4F5C\\u662F\\u4E00\\u4E2A\\u5E26\\u6709\\u72B6\\u6001\\u6570\\u636E\\u7684\\u8BA2\\u9605\\u901A\\u77E5\\u5DE5\\u5177\\uFF0C\\u4E3B\\u8981\\u662F\\u5B9E\\u73B0\\u4E86\\u5B8C\\u6574\\u7684 TypeScript \\u652F\\u6301\\uFF0C\\u5728\\u5177\\u4F53\\u4F7F\\u7528\\u7684\\u5730\\u65B9\\u6BD4\\u8F83\\u65B9\\u4FBF\\u3002\"), mdx(CodeWithPreview, {\n column: true,\n titleBar: \"novus.tsx\",\n codes: [{\n lang: \"ts\",\n code: novus_novusCodeStrSimple\n }],\n withTitle: true,\n mdxType: \"CodeWithPreview\"\n }), mdx(\"h2\", null, \"\\u4E94\\u3001\\u4EE3\\u7801\\u548C\\u5B9E\\u4F8B\"), mdx(SourceCodeLink, {\n url: \"https://cnb.cool/ubug/novus/novus\",\n name: \"NOVUS\",\n desc: \"\\uD83D\\uDCE6 \\u5B9E\\u73B0\\u4E00\\u4E2A\\u7B80\\u5355\\u6734\\u7D20\\u7684 react \\u6570\\u636E\\u7BA1\\u7406\\u5C42\",\n mdxType: \"SourceCodeLink\"\n }), mdx(\"p\", null, \"\\u6216\\u8005\\u76F4\\u63A5\\u5728\\u672C\\u6587\\u770B\\uFF0C\\u5168\\u90E8\\u4EE3\\u7801\\u548C\\u5B9E\\u4F8B\\u5982\\u4E0B\\uFF1A\"), mdx(CodeWithPreview, {\n column: true,\n titleBar: \"实例\",\n codes: [{\n lang: \"ts\",\n code: novus_novusCodeStr\n }, {\n lang: \"ts\",\n code: novus_novusExampleStr1\n }, {\n lang: \"ts\",\n code: novus_novusExampleStr\n }],\n withTitle: true,\n preview: mdx(ExampleTodoExample, {\n mdxType: \"ExampleTodoExample\"\n }),\n mdxType: \"CodeWithPreview\"\n }));\n}\n;\nMDXContent.isMDXComponent = true;"}}}}